d3js力定向箭头不会出现在路径的末尾。

Question

我想用箭头来可视化一个图形，节点就是图像。我几乎跟在这后面。但是，箭头不会出现在路径的末尾。它是这样的：

​

我怎样才能克服这一切？此外，我想将链接设置在图像的中心。因为在默认情况下，它们出现在左边的顶部。我考虑在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)

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

考虑到标记是箭头，您可能希望这一点是

• [0, 0]将其底部放置在行尾或 .attr("refX"，0) //可以省略，默认值为0 .attr("refY"，0) //可以省略，默认值为0
• [10, 0]将其尖端放置在行尾。 .attr("refX"，10) .attr("refY"，0) //可以省略，默认值为0

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