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

d3.js: how to offset starting and ending points in links in tree layout

本文关键字：链接 起点 终点 布局 js 何偏移 d3      更新时间：2023-09-26

我有一个使用d3的树布局，在视觉上每个节点有3个部分（嵌套在节点内的路径）。我试图做的是根据节点类型更改链接的起点，但将链接的终点保持在新节点的中心。因此，最终布局可以有从两个位置之一开始的点（顶部视觉十六进制或底部十六进制）。以下是我想要做的事情的模型：所需连接器链接的实物模型

这就是我目前所拥有的，只需使用对角函数并添加偏移：当前屏幕截图

我知道我可以使用对角线函数来抵消上面屏幕截图中的静态量，但这适用于链接的开始和结束位置：var对角线=d3.svg.对角线（）.投影（函数（d）{return[d.y+50，d.x]；}）；

这将使链接水平偏移50（我翻转了方向），这对父节点来说很好，但我希望子节点有不同的偏移，只绘制到d.y.

非常感谢您的帮助。

我不知道你是否已经整理好了，但这对我来说很有效：

    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，但我从右向左，所以你可能需要摆弄参数。

第一个帖子——请温柔。

相关文章：