D3 版本 4.9.0 引入了链接形状，它具有与d3.svg.diagonalD3 v3 中旧版本相同的功能。

根据API：

链接形状生成从源点到目标点的平滑三次贝塞尔曲线。曲线起点和终点的切线是垂直、水平或径向。

有以下三种方法：

• d3.linkHorizo​​ntal()
• d3.linkVertical()
• d3.linkRadial()

因此，对于像您链接的那样的可折叠树，您将路径d属性定义为：

.attr("d", d3.linkHorizontal()
    .x(function(d) { return d.y; })
    .y(function(d) { return d.x; }));

演示：

假设您有一个带有sourceand的对象target，每个对象都有xandy属性：

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

首先，创建链接生成器：

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

然后你可以通过将该数据传递给链接生成器来绘制路径：

.attr("d", link(data))

这是演示：

var svg = d3.select("svg");

var data = {
  source: {
    x: 20,
    y: 10
  },
  target: {
    x: 280,
    y: 100
  }
};

var link = d3.linkHorizontal()
  .x(function(d) {
    return d.x;
  })
  .y(function(d) {
    return d.y;
  });

svg.append("path")
  .attr("d", link(data))
  .style("fill", "none")
  .style("stroke", "darkslateblue")
  .style("stroke-width", "4px");

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

请参阅此处的GitHub 问题。

虽然问题仍然存在，但 Bostock 先生似乎并不急于在第 4 版中重新实现它。为什么？因为实现自己很简单：

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}

我对此感到非常困难，然后几个小时后，我意识到它真的很容易（就像其他人提到它一样）。代替：

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; });

...有了这个：

var diagonal = function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
};

这应该是唯一的变化。希望这对其他人有帮助。这应该适用于像Patrick Brockman 的 Collapsible/Searchable Tree这样的可视化。

对于那些有垂直树的人，下面的函数将产生弯曲的对角线，如本例所示。

该函数是根据 Mark 的回答修改的，方法是 (1) 切换 x 和 y 调用，以及 (2) 更改两条中间线的计算坐标。在没有坐标变化的情况下，曲线被倒置，例如在这篇文章中。

var diagonal = function link(d) {
  return "M" + d.source.x + "," + d.source.y
      + "C" + d.source.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + d.target.y;
};

作为旁注，如果你想要四四方方的而不是弯曲的边缘，你可以替换"C"为" "。

我和你有同样的问题，Tadaa！此处提供了适用于D3的V6的新版本树（基于Mike Bostock的工作）：https : //bl.ocks.org/d3noob/9de0768412ac2ce5dbec430bb1370efe

我粘贴了下面的代码，以防 url 因未知原因消失：

.node圆{填充：#fff；笔画：钢蓝；描边宽度：3px；}

.node 文本 { 字体：12px sans-serif; }

.link { 填充：无；中风：#ccc; 描边宽度：2px；}

src="https://d3js.org/d3.v6.min.js">

var treeData = { "name": "Top Level", "children": [ { "name": "Level 2: A", "children": [ { "name": "A Son of A" }, { "name ": "A 的女儿" } ] }, { "name": "Level 2: B" } ] };

// 设置图表的尺寸和边距 var margin = {top: 20, right: 90, bottom: 30, left: 90}, width = 960 - margin.left - margin.right, height = 500 - margin.top - 保证金.底部;

// 将 svg 对象附加到页面主体 // 将一个 'group' 元素附加到 'svg' // 将 'group' 元素移动到左上角 var svg = d3.select("body").append ("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("变换", "translate(" + margin.left + "," + margin.top + ")");

var i = 0，持续时间 = 750，根；

// 声明一个树布局并分配大小 var treemap = d3.tree().size([height, width]);

// 分配父级、子级、高度、深度 root = d3.hierarchy(treeData, function(d) { return d.children; }); root.x0 = 高度 / 2; 根.y0 = 0;

// 在第二层之后折叠 root.children.forEach(collapse);

更新（根）；

// 折叠节点及其所有子节点 function collapse(d) {
if(d.children) { d._children = d.children d._children.forEach(collapse) d.children = null } }

功能更新（来源）{

// 为节点分配 x 和 y 位置 var treeData = treemap(root);

// 计算新的树布局。var 节点 = treeData.descendants(), links = treeData.descendants().slice(1);

// 标准化固定深度。node.forEach(function(d){dy = d.depth * 180});

// ****************** 节点部分 ***************************

// 更新节点... var node = svg.selectAll('g.node') .data(nodes, function(d) {return d.id || (d.id = ++i); });

// 在父级之前的位置输入任何新模式。var nodeEnter = node.enter().append('g') .attr('class', 'node') .attr("transform", function(d) { return "translate(" + source.y0 + ", " + source.x0 + ")"; }) .on('click', click);

// 为节点添加 Circle nodeEnter.append('circle') .attr('class', 'node') .attr('r', 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });

// 为节点添加标签 nodeEnter.append('text') .attr("dy", ".35em") .attr("x", function(d) { return d.children || d._children ? - 13 : 13; }) .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d .data.name; });

// 更新 var nodeUpdate = nodeEnter.merge(node);

// 转换到节点的正确位置
nodeUpdate.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + dy + "," + dx + ")"; });

// 更新节点属性和样式
nodeUpdate.select('circle.node') .attr('r', 10) .style("fill", function(d) { return d._children ? "lightsteelblue" : "# fff"; }) .attr('光标', '指针');

// 移除所有退出节点 var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source .x + ")"; }) .remove();

// 在退出时将节点圆圈大小减少到 0
nodeExit.select('circle') .attr('r', 1e-6);

// 退出时降低文本标签的不透明度
nodeExit.select('text') .style('fill-opacity', 1e-6);

// ****************** 链接部分 ****************************

// 更新链接... var link = svg.selectAll('path.link') .data(links, function(d) { return d.id; });

// 在父级之前的位置输入任何新链接。var linkEnter = link.enter().insert('path', "g") .attr("class", "link") .attr('d', function(d){ var o = {x: source. x0, y: source.y0} return diagonal(o, o) });

// 更新 var linkUpdate = linkEnter.merge(link);

// 过渡回父元素位置
linkUpdate.transition() .duration(duration) .attr('d', function(d){ return diagonal(d, d.parent) });

// 删除所有退出链接 var linkExit = link.exit().transition() .duration(duration) .attr('d', function(d) { var o = {x: source.x, y: source.y } 返回对角线(o, o) }) .remove();

// 存储用于转换的旧位置。
node.forEach(function(d){ d.x0 = dx; d.y0 = dy; });

// 创建从父节点到子节点的弯曲（对角线）路径
function diagonal(s, d) { path = `M ${sy} ${sx} C ${(sy + dy) / 2} ${sx} , ${(sy + dy) / 2} ${dx}, ${dy} ${dx}` 返回路径 }

// 点击时切换子项。功能点击（事件，d）{如果（d.children）{d._children = d.children；d.children = null; } else { d.children = d._children; d._children = null; } 更新）; } }

你还会在那里找到一些其他的例子