使用d3.js显示数据

Question

我在应用程序中显示树数据。 我有使用D3的典型JSON结构。

{
  name: 'test',
  children: [
    name: 'test2',
    children: []
  ]
  ...
}

我像本教程http://bl.ocks.org/d3noob/8375092一样计算节点并渲染树。 我的问题：是否可以在不同级别显示root的子节点？ 例如：

我有这个：

我想要这个：

感谢所有答案。

Answer 1

我认为您要使用的是“ 群集布局” ，它将所有叶节点置于同一级别。

这是一个例子：

var data = {
    'name': 'root',
        'children': [{
        'name': 'level 1.a',
            'children': [{
            'name': 'level 2.a',
                'children': [{
                'name': 'level 3.a',
                'size': 3938
            }, {
                'name': 'level 3.b',
                'size': 3812
            }, {
                'name': 'level 3.c',
                'size': 743
            }]
        }, {
            'name': 'level 2.b',
                'children': [{
                'name': 'level 3.a',
                'size': 3534
            }, {
                'name': 'level 3.b',
                'size': 5731
            }]
        }]
    }, {
        name: 'level 1.b',
        children: []
    }]
};

var height = 300;
var width = 500;

var cluster = d3.layout.cluster()
    .size([height, width - 100]);

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

var svg = d3.select('body').append('svg')
    .attr('height', height)
    .attr('width', width)
    .append('g')
    .attr('transform', 'translate(40, 20)');

var nodes = cluster.nodes(data);
var links = cluster.links(nodes);

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('path')
    .attr('class', 'link')
    .attr('d', diagonal);

var node = svg.selectAll('.node')
    .data(nodes)
    .enter().append('g')
    .attr('class', 'node')
    .attr('transform', function (d) {
    return 'translate(' + d.y + ',' + d.x + ')';
});

node.append('circle')
    .attr('r', 4.5);

node.append('text')
    .attr('dx', 8)
    .attr('dy', 3)
    .text(function (d) {
    return d.name;
});

JSFiddle示例