javascript - 在 d3 力有向图中使用曲线

Question

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

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

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)');

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