在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.

我一直在google，我最好的想法是替换 link.attr（marker-end，...）与 link.attr（marker-segment，...）到此示例（查看图形中间的十字架） 。但这似乎不工作..我猜猜，因为它是SVG2草案的一部分，但我的浏览器支持较低的版本？ （我使用的是最新版的Chrome btw）。

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?

推荐答案

代替将标记放置在末尾，请创建线条（< polyline> c $ c>< path> ），在该行中间有一个点，并使用 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-mid 和


2. 修改路径生成代码以创建两个圆弧（在中间连接）而不是一个。

1. Changing marker-end to marker-mid, and
2. Modifying the path generation code to create two arcs (connected in the middle) instead of one.

这将需要一些简单的三角法像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屋！