d3js中的链接上的箭头强制布局 [英] arrows on links in d3js force layout

问题描述

我使用强制布局来表示定向未加权网络。我的灵感来自以下示例： http://bl.ocks.org/mbostock/1153292

I'm using the force layout to represent a directed unweighted network. My inspiration comes from the following example: http://bl.ocks.org/mbostock/1153292

>

我试图做不同大小的节点，但我有一个小问题。
用于在每个链接上绘制箭头的标记指向圆的中心。

I tried to make nodes of different sizes, but I have a little problem. The marker used to draw the arrow on each link points to the center of the circle. If the circle is too big it covers completely the arrow.

推荐答案

方案

您可以将链接的目标偏移节点的半径，即调整代码

You can offset the target of the link by the radius of the node, i.e. adjust the code

path.attr("d", function(d) {
var dx = d.target.x - d.source.x,
    dy = d.target.y - d.source.y,
    dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
});

c>和 d.target.y 来取半径（这将需要是数据的一部分，例如 d.target.radius ）。也就是说，将箭头的终点偏移圆半径。

by changing the values of d.target.x and d.target.y to take the radius (which would need to be part of the data, something like d.target.radius) into account. That is, offset the end of the arrow by the circle radius.

这篇关于d3js中的链接上的箭头强制布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！