在d3力导向图中使用曲线

Question

我想通过d3力导向图来可视化一些数据。

然而，连接节点的线条是直线。但是数据可能有多个边连接两个节点。因此，在力导向图中的直线无法正确显示所有这些连线。我尝试将路径附加到链接而不是线条上。但是它没有起作用。我不知道那是因为我用错了还是力导向布局不接受路径作为链接。

- Guoxing Li

---

一个简化的示例展示你尝试的代码和结果（可以通过http://bl.ocks.org/或http://jsfiddle.net）将有助于得到他人的帮助。 - Phrogz

这里有一个带曲线边缘的力导向图的示例，链接在画廊中。 - mbostock

我有类似的需求。请看我的问题。 http://stackoverflow.com/questions/12853134/enclosing-the-nodes-of-a-d3-force-directed-graph-in-a-circle-or-a-polygon-or-a-c - Sunil Raj

Answer 1

使用SVG路径而不是线条

var viz = d3.select("body")
    .insert("svg:svg", "h2")
    .attr("width", "100%")
    .attr("height", "100%")

. . . . . . . .

    .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.selectAll("path").data(force.links()).enter()
                .append("svg:path").attr("source", function(d) {
                    return d.source.id;
                }).attr("target", function(d) {
                    return d.target.id;
                }).attr("class", "link").attr('marker-end', 'url(#head)');

这里的源和目标是节点，曲线在'svg:path'的'd'属性中指定，marker-end属性是箭头头部。

- Rahul G Nair