1

我目前正在扩展此处提供的 d3 for rap 示例：

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

通过树状图。如果不是必要的话，我不想详细说明。当我尝试在我的结构上运行树图布局时，会出现特定问题。该结构由一个“Treemap”作为根和一个“children”数组组成，该数组包含根的所有直接子级，类型为“ChartItem”。那些也包含孩子。每个图表项都包含一个数值“值”。

我希望这不会让人感到困惑。关键是，我不知道不同的树图属性是做什么用的。下面的配置是唯一“有效”的配置，只显示了连接到根的孩子（Treemap -> this）

  • 我会假设，我不需要 .value 属性，因为我的节点已经包含一个“值”，这是错误的吗？

  • 与 'children' 和 'nodes' 属性相同

  • 我不知道如何设置这些属性。我知道 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;});

我将不胜感激，尤其是一些解释如何使用树形图布局

先感谢您。

4

1 回答 1

4

.nodes(root)and.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.

希望这更有意义。

于 2013-09-26T15:39:47.747 回答