d3.js:父母的大小=孩子的大小总和

Question

我正在构建与此类似的东西.我想要的是使每个节点的大小与json文件中定义的大小相同,或者,如果它没有大小属性​​,而json中的子属性,它是所有子节点大小的总和.怎么会这样做呢？我已经尝试了各种方法,但没有添加东西并用JSON硬编码,这有点蹩脚,我还没有发现任何真正有用的东西;(任何建议,蜂巢头脑？

Answer 1

如果您的数据是树结构,则可以使用分区布局来初始化节点的位置和大小.在d.value通过分区的父节点的所有子节点返回的默认值的总和,假设你已经正确设置值存取函数返回要使用的大小叶节点的数据变量.

虽然分区示例中的标准显示是具有空间填充矩形或弧而不是节点和链接,但它仍具有其他层次结构布局的所有基本功能.因此,一旦在根上运行布局以生成节点数组,就可以运行links函数来计算链接.

如果您仍然需要基于强制的布局而不是静态树,则只需传入节点并链接到力布局并启动它.

总共:

var root = /*root object read from JSON data*/;

var w,h; /*set appropriately */

var partition = d3.layout.partition()
           .size([w,h])
           .value(function(d){return d.size;})
           .children(function(d){return d.children;}) 
                  //optional: this is the default, change as needed
           .sort(null); 
                 //optional: turns off sorting, 
                 //the default is to sort children by descending size

var nodes = partition(root);

var links = partition.links(nodes);

initialize();

var force = d3.layout.force()
            .nodes(nodes)
            .links(links)
            .size([w,h])
             /*and any other customization*/
            .start();

svg.on("tick", update);

有一点需要注意.x分区布局创建的值设计为矩形的角,而不是圆的中心.因此,如果您根据原始x值定位节点,您最终会将父母带到他们孩子的最左侧.如果您之后通过基于强制的布局运行所有内容,它最终将自行排序,但您可以通过在初始化期间设置d.x = d.x + d.dx/2并d.y = d.y + d.dy/2在所有节点上(例如,.each()在enter()链中使用调用)从一开始就将它们置于中心位置.当然,用于d.value初始化节点大小(具有适当的比例).