如何在强制布局中生成朝向右侧的链接 D3.js

Question

如何在强制布局中生成指向右侧的链接弧角D3.js，如图：

我尝试了以下方法：

path.attr("d", function(d) {

    var x1 = d.source.x,
        y1 = d.source.y,
        x2 = d.target.x,
        y2 = d.target.y,
        dx = x2 - x1,
        dy = y2 - y1,

    if (x1 === x2) {

        dr = Math.sqrt(dx * dy + dy * dy);
        return "M" +
            d.source.x + "," +
            d.source.y + "A" +
            dr + "," + dr + " 0 0,1 " +
            d.target.x + "," +
            d.target.y;

    }
});

不过好像有的在左边，有的在右边。请帮我解决这个问题。

Answer 1

您始终将 sweep-flag 设置为 1，因此它将从 (x1,y1) 顺时针绘制到 (x2,y2)。下山的时候在右边，上山的时候在左边。您可以通过检查方向是向上还是向下来对其进行归一化，然后交换点的顺序或反转扫描方向：

if (x1 === x2) {
    var dr = Math.sqrt(dx * dy + dy * dy); // note that this is always equal to Math.abs(dy)
    var sweep = 0;
    if (y1 > y2) {
        sweep = 1
    }
    return "M" +
        d.source.x + "," d.source.y +
        "A" + dr + "," + dr +
        " 0 0," + sweep + " " +
        d.target.x + "," + d.target.y;
}

如何在强制布局中生成朝向右侧的链接 D3.js

How to generate links towards right side in force layout D3.js

javascript

svg

d3.js