时间戳

首页 > 解决方案 > 使用 d3 和 d3-flextree 插件绘制链接

d3.js - 使用 d3 和 d3-flextree 插件绘制链接

问题描述

我（仍在）尝试使用 D3 和 d3-flextree 插件制作组织结构图。我努力绘制节点之间的链接。我使用的“方程”考虑节点的中间（据我所知），而我想从节点的末尾绘制。

我认为我的错误在于我的绘图链接功能

function diagonal(s, d) {
  path = `M ${s.x} ${s.y}
  L ${s.x} ${(s.y + d.y) * 0.5},
  ${d.x} ${(s.y + d.y) *  0.5 },
  ${d.x} ${d.y}`
  return path
}

很难解释，所以我做了一个 JSFiddle：https
://jsfiddle.net/ymv5sr9k/11/ 在这个例子中，由于正确的填充，所有链接都是我想要的方式，但是只要 nodeSize 改变（见大节点）都坏了。我想我需要一个更通用的绘图链接功能，但我想不通

感谢阅读，
放大

标签： d3.js

解决方案

问题解决了！正如我在评论中所说，我需要移动水平线。我添加nodeSize了两个y“控制点”。而 nodeSize 实际上是source.y - destination.y - padding. 这是我的最终等式：

function diagonal(s, d) {
    var nodeSize = s.y - d.y - 30
    return "M" + s.x + "," + s.y
        + "L" + s.x + "," + (d.y + s.y + nodeSize) / 2
        + " " + d.x + "," +  (d.y + s.y + nodeSize) / 2
        + " " + d.x + "," + d.y;
};

感谢您的时间！

推荐阅读