Question

我用d3js创建了一个网络图。我有不同半径的圆圈。圆圈之间的每条线都有一个指向其源的箭头。如何根据圆半径正确调整箭头标记？

以下是jsfiddle http://jsfiddle.net/2NJ25/10/

中该代码的链接

这是我将箭头添加到行

的方法

svg.append("defs").append("marker")
        .attr("id", "arrow")
        .attr("refX", 10)
        .attr("refY", 2.2)
        .attr("markerWidth", 10)
        .attr("markerHeight", 10)
        .attr("orient", "auto")
        .append("path")
        .attr("d", "M0,0 V4 L5,2 Z10");

Answer 1

您可以调整链接。这将调整附加箭头的大小。

var links = svg.append("g").selectAll("line.link")
    .data(force.links())
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function(d) {
        return (d.target.cRadius) / 5; })
    .attr("marker-end", "url(#arrow)");

我注意到您的标记路径出错。这是我使用的那个：

svg.append("defs").append("marker")
    .attr("id", "arrow")
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", 21)
    .attr("refY", 0)
    .attr("markerWidth", 5)
    .attr("markerHeight", 5)
    .attr("orient", "auto")
.append("path")
    .attr("d", "M0,-5L10,0L0,5");

完整的代码在这里：

http://vida.io/documents/4FSGQ6Pn6dsEHuYaM

如何根据圆周大小调整箭头？

1 个答案: