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

Question

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

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

我知道这与以下代码有关,但是,我找不到解决方案.我想链接是直的,转90度.

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

Answer 1

问题是从链接中提取 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
            }]);
        });