以線性格式顯示D3樹布局

Question

我正在遵循D3可折疊樹布局指南，並嘗試從以下位置更改樹的布局

為線性格式，其中“根”節點是樹上最左側的節點

我對D3並不太了解，但是我假設d3.diagonal()函數以及節點x＆y參數控制着線和節點的位置。 任何有關此方面的意見或指導會為我指明正確的方向嗎？

Answer 1

做這個

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