在 D3 力布局链接中间显示一个箭头 [英] Display an arrow head in the middle of D3 force layout link

问题描述

我使用 D3 绘制了一个力有向图，与这个例子非常相似:http://bl.ocks.org/mbostock/1153292

I'm using D3 to draw a force-directed graph, which is very similar to this example: http://bl.ocks.org/mbostock/1153292

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

I'm trying to place the arrowheads in the middle of the links instead of the end.

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

Playing with the attr("refX", 0) of the marker doesn't help much, because it's absolute and not relative to the link length - my links have varying lengths.

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

I've been googling around, and my best idea was to replace link.attr("marker-end", ...) with link.attr("marker-segment", ...) according to this example (look for the crosses in the middle of the graphs). But this doesn't seem to work.. I'm guessing because it's part of SVG2 draft only but my browser supports a lower version? (I'm using the most recent ver of Chrome btw).

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

How can I place the arrowheads in the middle of the links?

推荐答案

不要将标记放在末端，而是创建线条( 或 ) 在线中间有一个点并使用 marker-mid 应用箭头.

Instead of placing the marker on an end, create your lines (<polyline> or <path>) with a single point in the middle of the line and use marker-mid to apply the arrowheads.

_{这个演示用于我的这个答案 使用这种技术沿着路径的长度以及 marker-mid 创建多个内部点.您只需创建一个航点"而不是多个.}

_{This demo for this answer of mine uses this technique to create multiple interior points along the length of a path along with marker-mid. You would simply be creating a single 'waypoint' instead of many.}

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

Edit: Here's a simple hack to the existing demo showing what I mean:

唯一的变化是:

1. 将 marker-end 更改为 marker-mid，以及
2. 修改路径生成代码以创建两个圆弧(在中间连接)而不是一个.

它需要一些简单的三角函数，如 Superboggly 所示，以根据您想要的线条弯曲量来选择合适的中点.

It will require some simple trigonometry like Superboggly illustrates to pick an appropriate midpoint based on the amount of bowing you want in your lines.

这篇关于在 D3 力布局链接中间显示一个箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！