javascript - d3.svg.diagonal() 在哪里？

Question

我试图执行如上所述的可折叠树的代码 here 。但似乎对 Angular 线法在 v4 中不适用(我可能是错的)。

对于:

var diagonal = d3.svg.diagonal()

我收到此错误:

TypeError: Cannot read property 'diagonal' of undefined

v4 中的等效项是什么？查看 d3.js API 引用并没有给我任何线索。

Answer 1

D3版本4.9.0推出link shapes ，与 D3 v3 中旧的 d3.svg.diagonal 具有相同的功能。

根据API :

The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical, horizontal or radial.

共有三种方法:

• 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 和 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>