javascript - d3.js:如何在树布局中偏移链接中的起点和终点

Question

我有一个使用 d3 的树布局，每个节点在视觉上有 3 个部分(路径嵌套在节点内)。我想做的是根据节点类型更改链接的起点，但将链接的终点保持在新节点的中心。所以最终的布局可以有从 2 个位置之一开始的点(顶部可视六 Angular 形，或底部六 Angular 形)。这是我想要做的事情的模型: Mockup of desired connector links

这是我目前仅使用对 Angular 线函数并添加偏移量所得到的: Current screenshot

我知道我可以使用对 Angular 线函数来偏移静态量，如上面的屏幕截图所示，但这适用于链接的开始和结束位置:var 对 Angular 线 = d3.svg.diagonal() .projection(function(d) { return [d.y + 50, d.x]; });

这会将链接水平偏移 50(我翻转了方向)，这对父节点来说非常好，但我希望子节点具有不同的偏移量并且只绘制到 d.y。

非常感谢任何帮助。

Answer 1

我不知道你是否已经解决了这个问题，但这对我有用:

    var diagonal = d3.svg.diagonal()
        .source(function (d) {
            return {x: d.source.x, y: d.source.y};
        })
        .target(function (d) {
            return {x: d.target.x, y: d.target.y + rectWidth};
        })
        .projection(function (s) {
            return [s.y, s.x + (rectHeight / 2)];
        });

我也翻转了 x/y，但我从右到左，所以您可能需要调整参数。

第一篇文章——请保持温柔。