d3.svg.diagonal() 在哪里? [英] Where is d3.svg.diagonal()?

问题描述

我试图执行 此处 中提到的可折叠树的代码.但似乎对角线方法不适用于 v4(我可能错了).

I was trying to execute the code of collapsible-tree as mentioned here. But it seems the diagonal method is not applicable in v4 (I may be wrong).

对于:

var diagonal = d3.svg.diagonal()

我收到此错误:

类型错误:无法读取未定义的属性对角线"

TypeError: Cannot read property 'diagonal' of undefined

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

What is the equivalent in v4? Looking at d3.js API reference didn't give me any clue.

推荐答案

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

D3 version 4.9.0 introduced link shapes, which have the same functionality of the old d3.svg.diagonal in D3 v3.

根据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.linkHorizo​​ntal()
• d3.linkVertical()
• d3.linkRadial()

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

So, for a collapsible tree like that one you linked, you define the path d attribute as:

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

演示:

假设您有一个带有 source 和 target 的对象，每个对象都有 x 和 y 属性:

Suppose you have an object with source and target, each one with x and y properties:

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

首先，您创建链接生成器:

First, you create the link generator:

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

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

And then you can draw the path just by passing that data to the link generator:

.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>

这篇关于d3.svg.diagonal() 在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！