D3.js树图布局

Question

我目前正在对扩大此处提供的说唱例如D3：

https://github.com/ralfstx/rap-d3charts

通过树形图的图表。 我不想进入细节，如果不neseccary。当我尝试在我的结构上运行树图布局时，会发生特定的问题。 这个结构包含一个'Treemap'作为一个根，'child'数组包含了所有类型为'ChartItem'的根的直接子元素。那些也包含儿童。 每个chartitem都包含一个数值'value'。

我希望这不是太困难.. 重点是，我不知道什么是不同的树形图属性。下面的配置是唯一一个“作品”，可见我只是附着在根的孩子（树图 - >本）

• 我会承担，我并不需要，因为.value的属性我的节点已经包含一个'值'是错误的？

• 相同的“孩子”和“节点”属性

• 我不知道如何设置这些属性。我知道D3树形图的例子和API参考，但他们对我没有任何帮助..

  var treemap = d3.layout.treemap() 
  .size([500,300]) 
  .padding(4) 
  .children(function(d) { return d }) 
  .value(function(d){return d.value}) 
  .nodes(this.children); 
  
  
  
      var selection = this._layer.selectAll("g.item") 
  
      var color = d3.scale.category20c(); 
      console.log(this); 
      console.log(treemap); 
  
      var cells = selection 
      .data(treemap) 
      .enter() 
      .append("svg:g") 
      .attr("class", "item") 
      .append("rect") 
      .attr("x", function(d){return d.x;}) 
      .attr("y", function(d){return d.y;}) 
      .attr("width", function(d){return d.dx;}) 
      .attr("height", function(d){return d.dy;}) 
      .attr("fill", function(d){return color(d.parent) }) 
      .attr("stroke", "black") 
      .attr("stroke-width",1); 
  
      var textfields = selection 
      .append("svg:text") 
      .attr("opacity", 1.0) 
      .attr("x", function(d){return d.x;}) 
      .attr("y", function(d){return d.y+20;}) 
      //.text(function(d){return d.children ? null : d._text;}); 
      .text(function(d){return d._text;}); 
  

我希望得到任何帮助，特别是一些解释树图布局是如何被使用的

先谢谢你。

Answer 1

的.nodes(root)和.links(nodes)用于获取节点和链路的阵列/列表具体。

通常你想给你的主/根数据对象或您的树的节点功能的子节点，并利用从中提取的节点传递给链接函数来确定节点和感兴趣的链接。

您提到的后者函数.children(childrenAccessorFunction)和.value(valueAccessorFunction)告诉d3的树形图布局如何访问数据结构中节点的子节点以及如何分别访问数据结构中节点的值。如果未指定，则d3将使用node.children获取节点的子节点数组和node.value以获取节点的值。考虑下面我刚才所说的例子：

var family= { 
    "name": "Fred", 
    "age": 81, 
    "kids": [ 
    { 
     "name": "Becky", 
     "age": 51, 
     "kids": [ 
     {"name": "John", "age": 15}, 
     {"name": "Jill", "age": 11} 
     ] 
    } 
    ] 
} 

var treemap = d3.layout.treemap() 
    .children(function(d) { return d.kids}) // instructs the algorithm to find children by looking for node.kids instead of the default node.children 
    .value(function(d) { return d.age; }) // similarly, value of the nodes is the age attribute of the node 

// now whenever treemap has gone through and set up your structure, you can call 
var persons = treemap.node(family) // to get all the people in the family (flat structure) 
// each person object will have (after d3 enriches it) 
// * parent - the parent node, or null for the root. 
// * children - the array of child nodes, or null for leaf nodes. 
// * value - the node value, as returned by the value accessor. 
// * depth - the depth of the node, starting at 0 for the root. 
// * x - the minimum x-coordinate of the node position. 
// * y - the minimum y-coordinate of the node position. 
// * dx - the x-extent of the node position. 
// * dy - the y-extent of the node position. 

var relationship = treemap.links(persons) // this will give you the link nodes which will be objects with the following attributes 
// * source - the parent node (as described above). 
// * target - the child node. 

希望这样做更有意义。