d3.js：父母的SIZE =儿童

Question

我建立神似this东西的大小的总和。我所喜欢的是让每个节点的大小与json文件中定义的大小相同，或者，如果它没有大小属性​​，而是json中的子级属性（它是所有子级大小的总和），则为OR。怎么会这样做呢？我已经尝试了各种方法，但缺乏添加和硬编码它在JSON中，这是有点跛脚，我还没有发现任何真的会工作;（任何建议，蜂巢的心态？

Answer 1

如果您的数据是一个树状结构，你可以使用一个Partition Layout初始化节点的位置和大小。通过分区父节点返回的d.value是默认值的所有子节点的总和，假设你已经正确设置value accessor function返回数据变量你想用于叶节点的大小

尽管partition examples中的标准显示是用空间填充的矩形或弧来代替节点和链接，但它仍然具有所有基本功能其他层次布局的类型。因此，一旦您在根上运行布局来生成节点数组，您可以运行links function来计算链接。

如果仍要基于力的布局，而不是一个静态的树，你可以在你的节点和链路传递给力布局并启动它。

总之：

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值设计为矩形的角点而不是圆的中心。因此，如果您根据原始值定位您的节点，则最终会将父母带到子女的最左侧。如果你正在运行后通过基于力的布局的一切，它最终将自行解决，但你可以从一开始就在初始化过程中设置所有的节点上d.x = d.x + d.dx/2和d.y = d.y + d.dy/2（例如，在你的enter()使用.each()呼叫中心的他们链）。当然，使用d.value初始化您的节点大小（以适当的比例）。