d3js Force-Directed Arrows erscheinen nicht am Ende des Pfades

Question

Ich möchte ein Diagramm mit Pfeilen visualisieren und die Knoten sind Bilder. Ich folgte ziemlich oft this. Der Pfeil erscheint jedoch nicht am Ende des Pfades. Es ist so:

Wie kann ich das überwinden? Außerdem möchte ich die Links in der Mitte der Bilder setzen. Weil sie standardmäßig links oben erscheinen. Ich dachte über das Hinzufügen einer Breite Wert d.source.x in der Tick, aber dann bekomme ich eine Error: Problem parsing d="some number".

var svg = d3.select('#graph-visualization') 
    .append("svg:svg") 
    .attr("height", canvas.height) 
    .attr("width", canvas.width) 
    .attr("id", "canvas"); 

svg.append("svg:defs").selectAll("marker") 
    .data(["end"])  // Different link/path types can be defined here 
    .enter().append("svg:marker") // This section adds in the arrows 
    .attr("id", String) 
    .attr("viewBox", "0 -5 10 10") 
    .attr("refX", 15) 
    .attr("refY", -1.5) 
    .attr("markerWidth", 10) 
    .attr("markerHeight", 10) 
    .attr("orient", "auto") 
    .append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

var nodes = [], 
    links = []; 

var force = d3.layout.force() 
    .gravity(.05) 
    .linkDistance(100) 
    .charge(-1000) 
    .nodes(nodes) 
    .links(links) 
    .size([$('svg').attr('height'), $('svg').attr('width')]); 

var node = svg.selectAll(".node"), 
    link = svg.selectAll('.link'); 

var drag = force.drag().on("dragstart", dragstart); 

function update() { 
    link = link.data(links, function(d) { 
     return d.source.id + '-' + d.target.id; 
    }); 

    var linktag = link.enter().append("g").attr("class", "link"); 
    var linkline = linktag.append("svg:path") 
     .attr("class", "linkline") 
     .attr("marker-end", "url(#end)"); 

    node = node.data(force.nodes(), function(d) { 
       return d.id; 
    }); 
    node.exit().remove(); 
    var appended = node.enter().append("g").call(drag); 
    appended.append('image') 
     .attr("xlink:href", function(d) { 
      return someURLthatcontainsanImage; 
     }) 
     .attr('x', '-8px') 
     .attr('y', '-8px'); 
} 
force.on("tick", function(e) { 
    link.selectAll("path").attr("d", function(d) { 
     var dx = d.target.x - d.source.x, 
      dy = d.target.y - d.source.y, 
      dr = 0; 
      return "M" + 
      d.source.x + 
      "," + 
      d.source.y + 
      "A" + 
      dr + "," + dr + " 0 0,1 " + 
      d.target.x + 
      "," + 
      d.target.y; 
    }); 
}); 

Answer 1

Wenn

.attr("refX", 15) 
.attr("refY", -1.5) 

Einstellung Sie coordinates der Referenzpunkt der Markierung [15, -1.5] setzen. Dieser Punkt im Koordinatensystem des Markers wird am Ende der Zeile gerendert, die den Offset angibt, den Sie gerade sehen.

Da der Marker ein Pfeil ist, dass Sie wahrscheinlich dieser Punkt sein wollen entweder

• [0, 0] Platzierung seiner Basis am Ende der Leitung oder

  .attr("refX", 0) // may be omitted, defaults to 0 
  .attr("refY", 0) // may be omitted, defaults to 0 
  

• [10, 0] Platzierung seiner Spitze an das Ende der Linie.

  .attr("refX", 10) 
  .attr("refY", 0) // may be omitted, defaults to 0 
  

Beachten Sie, dass beide refX und refY Standard 0 in diesem Fall gibt es keine Notwendigkeit, sie explizit zu setzen.