d3.js带有直链接的缩进树

我的代码基于

我希望在父对象/子对象之间使用直线链接，而不是曲线链接

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

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

---

你快到了。您需要使用具有适当插值的法线，例如

var line = d3.svg.line().interpolation("step")
                 .x(function(d) { return d.y; })
                 .y(function(d) { return d.x; });

---

您可能需要调整精确的插值模式。

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

链接生成器：

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

然后像这样使用发电机：

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

---

这些类型的链接被认为是“正交的”，因为

d3.svg.line（）

本身不能作为

d3.svg.diagonal（）

的简单插入式替代，因为它们返回不同的内容。另请参阅。