在 d3 力有向图中使用曲线

【问题标题】：Use curve in d3 force directed graph在 d3 力有向图中使用曲线
【发布时间】：2012-06-19 22:57:55
【问题描述】：

我想通过 d3 force layout 可视化一些数据。

但是，连接节点的链接是直线。但是数据可能有多个边连接两个节点。所以直线强制布局无法正确显示所有这些。我试图附加链接的路径而不是行。但它没有用。我不知道那是因为我以错误的方式或强制使用它布局不接受路径作为链接。

【问题讨论】：

显示您尝试过的代码和结果的简化示例（可能通过bl.ocks.org 或jsfiddle.net）将大大有助于让人们帮助您。
有一个从gallery 链接的force layout with curved edges 示例。
我也有类似的要求。请看我的问题。 stackoverflow.com/questions/12853134/…

【解决方案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)');

这里 source 和 target 是 nodes ，曲线在 'd' 属性中指定strong>svg:path' 和 marker-end 属性用于箭头

【讨论】：