d3.svg.diagonal()在哪里？

Question

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

对于:

var diagonal = d3.svg.diagonal()

我收到此错误:

var diagonal = d3.svg.diagonal()

如果是,那么v4中的等价是什么？看看d3.js API参考没有给我任何线索.

Answer 1

更新:自D3 v4.9发布以来,已接受的答案已过时.

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; }));

演示:

假设你有一个带有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>

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;
}

Answer 3

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

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这样的可视化。