Question

我正在努力扩展d3 for rap示例：

通过树形图表。如果不是neseccary，我不想详细说明。当我尝试在我的结构上运行树形图布局时，会出现特定问题。这个结构包含一个'Treemap'作为根，其中包含'children'数组，其中包含root类型为'ChartItem'的所有直接子节点。那些包含儿童。每个chartitem都包含一个数值'value'。

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

我认为，我不需要.value属性，因为我的节点已经包含'值'这是错误的吗？
与'children'和'nodes'属性相同

我不知道如何设置这些属性。我知道d3 treemap示例和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获取节点的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.

希望这更有意义。

D3.js树形图布局

1 个答案: