D3.js kullanılarak okunmak için satır nasıl çizilir

Question

D3.js. kullanarak satırı çizerek sorun yaşıyorum. Bazı öğreticiler gördüm ve bu kodu yazdım, ama sadece ok işareti olmayan çizgiyi görüyorum. Baksana lütfen şuna bak ve nerede olduğumu söyle. Şimdiden teşekkürler.

var w = 300; 
var h = 300; 
var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 

//arrow 
svg.append("svg:defs") 
    .append("svg:marker") 
    .attr("id", "triangle") 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto"); 

//line    
svg.append("line") 
    .attr("x1", 100) 
    .attr("y1", 100) 
    .attr("x2", 200) 
    .attr("y2", 100)   
    .attr("stroke-width", 1) 
    .attr("stroke", "black") 
    .attr("marker-end", "url(#triangle)"); 

Answer 1

aşağıdaki şekilde işaretleyici oluşturma değiştirme

: Bunu yaptığınızda

svg.append("svg:defs").append("svg:marker") 
    .attr("id", "triangle") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 6) 
    .attr("markerHeight", 6) 
    .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M 0 -5 10 10") 
    .style("stroke", "black"); 

, bir çizgi çekiliyor göreceksiniz.

svg.append("svg:defs").append("svg:marker") 
    .attr("id", "triangle") 
    .attr("refX", 6) 
    .attr("refY", 6) 
    .attr("markerWidth", 30) 
    .attr("markerHeight", 30) 
    .attr("orient", "auto") 
    .append("path") 
    .attr("d", "M 0 0 12 6 0 12 3 6") 
    .style("fill", "black");