javascript - d3js 力导向箭头不会出现在路径末尾

Question

我想可视化带有箭头的图表，节点是图像。我几乎关注了this 。但是，箭头不会出现在路径的末尾。它是这样的:

我该如何克服这个问题？此外，我想将链接设置在图像的中心。因为默认情况下它们出现在左上角。我考虑过将宽度值添加到 d.source.x在勾号中，但随后我得到一个 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

设置时

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

您正在将标记的引用点设置为 coordinates [15，-1.5]。标记坐标系中的这一点将呈现在给出您所看到的偏移量的线的末尾。

鉴于标记是一个箭头，您可能希望该点是

• [0, 0] 将其碱基放置在行尾或

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

• [10, 0] 将其尖端放置在行尾。

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

请注意，refX 和 refY 均默认为 0，在这种情况下无需显式设置它们。