d3.svg.diagonal() 在哪里？

Question

我试图执行 这里 提到的可折叠树的代码。但似乎对角线方法不适用于 v4（我可能错了）。

为了：

 var diagonal = d3.svg.diagonal()

我收到此错误：

类型错误：无法读取未定义的属性“对角线”

v4 中的等价物是什么？查看 d3.js API 参考并没有给我任何线索。

原文由 Mopparthy Ravindranath 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

根据 API ：

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

有以下三种方法：

• d3.linkHorizontal()
• d3.linkVertical()
• d3.linkRadial()

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

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

演示：

假设您有一个对象 source 和 target ，每个对象都有 x 和 —e72cdfd7eb22cab6cd19 y 属性

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>

原文由 Gerardo Furtado 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

请 在此处 查看 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;
}

原文由 Mark 发布，翻译遵循 CC BY-SA 3.0 许可协议