d3.js：父母的大小=孩子的大小的总和 [英] d3.js: size of parents = sum of size of children

问题描述

我正在建立类似于这的内容。我想要的是使每个节点或者它们的大小在json文件中定义，或者，如果它没有size属性，但json中的children属性，它的所有孩子的大小的总和。怎么会这样做？我尝试了各种方法，但缺乏添加的东西，并在JSON中硬编码，这是一个有点跛脚，我没有找到任何真正有效的;（任何建议，蜂巢心？

解决方案

如果您的数据是树结构，您可以使用分区布局来初始化节点的位置和大小。父节点的分区返回的 d.value 默认情况下是所有子节点的值的总和节点，假设您已正确设置值访问器函数，以返回数据变量您想要用于叶节点的大小。

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

如果你仍然想要一个基于力的布局，而不是一个静态树，你可以传入你的节点和链接到强制布局并启动它。 p>

总计：

  var root = / *数据*/; 
 
 var w，h; / * set appropriate * / 
 
 var partition = d3.layout.partition（）
 .size（[w，h]）
 .value（function（d）{return 
 //可选：这是默认值，根据需要更改
 .sort（null） ; 
 //可选：关闭排序，
 //默认是按大小降序排序子项
 
 var nodes = partition（root）; 
 
 var links = partition.links（nodes）; 
 
 initialize（）; 
 
 var force = d3.layout.force（）
 .nodes（nodes）
 .links（links）
 .size（[w，h]）
 / *和任何其他定制* / 
 .start（）; 
 
 svg.on（tick，update）; 
  

需要注意的一件事。由分区布局创建的 x 值设计为矩形的角而不是圆的中心。因此，如果你根据原始的 x 值定位你的节点，你的父节点将离开它们的子节点的最左边。如果你之后通过基于力的布局来运行所有的东西，它最终会自动排序，但你可以通过设置 dx = dx + d.dx / 2 和 dy = dy + d.dy / 2 在所有的节点上初始化（例如，使用 .each c $ c>调用 enter（）链）。当然，使用 d.value 来初始化你的节点大小（用适当的比例）。

I am building something quite similar to this. What I would love is to make every node either their size as defined in the json file, OR, if it has no size attribute but a children attribute in json, the sum of all of its children's sizes. How would one go about doing that? I have tried various methods but short of adding things up and hardcoding it in JSON, which is a bit lame, I haven't found anything that really would have worked ;( Any suggestions, hive mind?

解决方案

If your data is a tree structure, you could use a Partition Layout to initialize positions and sizes of nodes. The d.value returned by partition for parent nodes is by default the sum of values for all children nodes, assuming you've properly set the value accessor function to return the data variable that you want to use for size for leaf nodes.

Although the standard display in partition examples is to have space-filling rectangles or arcs instead of nodes and links, it still has all the basic functionality of the other hierarchy layouts. So once you've run the layout on your root to generate your array of nodes, you can run the links function to calculate the links.

If you still want a force-based layout instead of a static tree, you can just pass in your nodes and links to the force layout and start it up.

In sum:

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

One thing to note. The x value created by partition layout is designed to be the corner of a rectangle instead of the centre of a circle. So if you position your nodes based on the original x value, you'll end up with parents off to the far left of their children. If you're running everything through a force-based layout afterwards, it will sort itself out eventually, but you can centre them from the beginning by setting d.x = d.x + d.dx/2 and d.y = d.y + d.dy/2 on all your nodes during initialization (e.g., using an .each() call in your enter() chain). And of course, use d.value to initialize your node size (with an appropriate scale).

这篇关于d3.js：父母的大小=孩子的大小的总和的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！