Question

我想用箭头显示图形，节点是图像。我几乎跟着this。但是，箭头不会出现在路径的末尾。它是这样的：

我怎样才能克服这一点？此外，我想将链接设置在图像的中心。因为默认情况下它们出现在左上角。我想在tick中为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，在这种情况下，无需明确设置它们。

d3js强制定向箭头不会出现在Path的末尾

1 个答案: