d3.js带直链的缩进树

本文介绍了d3.js带直链的缩进树的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的代码基于 D3.js缩进树示例。

我想要直接链接，而不是父/子对象之间的弯曲链接。

I want straight links instead of the curved links between parent/child-objects.

我理解这与下面的代码，但是，我找不到一个解决方案。我想要的链接是直线与90度转弯。

I understand this has something to do with the following code, however, I can't find a solution. I want the links to be straight with a 90-degree turn.

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

推荐答案

问题是提取x和y点链接。一种方法是：

The problem is to extract the x and y points from the links. One way of doing this is:

链接生成器：

self.diagonal = d3.svg.line().interpolate('step') .x(function (d) { return d.x; }) .y(function (d) { return d.y; });

然后使用这样的生成器：

And then use the generator like this:

link.enter().append('svg:path', 'g') .duration(self.duration) .attr('d', function (d) { return self.diagonal([{ y: d.source.x, x: d.source.y }, { y: d.target.x, x: d.target.y }]); });