javascript - 在 D3 强制布局链接中间显示一个箭头

Question

我正在使用 D3 绘制力导向图，这与此示例非常相似:http://bl.ocks.org/mbostock/1153292

我试图将箭头放在链接的中间而不是末尾。

使用标记的 attr("refX", 0) 没有多大帮助，因为它是绝对的而不是相对于链接长度 - 我的链接有不同的长度。

我一直在谷歌搜索，我最好的想法是用 link.attr("marker-segment ", ...) 根据此 example (寻找图表中间的十字)。但这似乎不起作用..我猜是因为它只是 SVG2 草稿的一部分，但我的浏览器支持较低版本？ (顺便说一句，我使用的是最新版本的 Chrome)。

如何将箭头放在链接的中间？

Answer 1

不要将标记放在一端，而是创建您的线条(<polyline> 或 <path>)，并在线条的中间使用一个点并使用 marker-mid 应用箭头。

_{This demo对于 this answer我的使用此技术沿路径长度创建多个内部点以及 marker-mid .您只需创建一个“航点”，而不是多个。}

编辑:这是对现有演示的简单修改，显示了我的意思:

演示:http://jsfiddle.net/tk7Wv/2/

唯一的变化是:

1. 正在更改 marker-end至 marker-mid , 和
2. 修改路径生成代码以创建两个弧(在中间连接)而不是一个。

这将需要一些简单的三 Angular 函数，例如 Superboggly 插图，以根据您希望线条弯曲的程度选择合适的中点。