D3.js Treemap Layout

Question

I'm currently working on extending the d3 for rap example provided here:

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

by a treemap chart. I don`t want to go into detail if not neseccary. The specific problem occurs when I try to run the treemap layout on my structure. This stucture consist of a 'Treemap' as a root with a 'children' array containing all direct children of root with type 'ChartItem'. Those contain childrens as well. Every chartitem contains a numeric value 'value'.

I hope that this is not to much confusing.. The point is, that I have no clue what the different treemap attributes are for. The configuration below is the only one that "works", showing me just the children attached to the root (the Treemap -> this)

• I would assume, that I don't need the .value attribute since my nodes already contain a 'value' Is that wrong?

• Same with the 'children' and 'nodes' attribute

• I have no idea how to set these attributes. I know the d3 treemap examples and the API reference but they are no help to me..

   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 dx;}) .attr("y", function(d){return dy;}) .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 dx;}) .attr("y", function(d){return d.y+20;}) //.text(function(d){return d.children ? null : d._text;}); .text(function(d){return d._text;}); 

I would appreciate any help, especially some explanation how the treemap layout is to be used

Thank you in advance.

Answer 1

The .nodes(root) and .links(nodes) are used to get the array/list of nodes and links specifically.

Usually you'd give your main/root data object or a sub-node of your tree to the nodes function and use the nodes extracted from it to pass to the links function to determine the nodes and links of interest.

The latter functions you mentioned .children(childrenAccessorFunction) and .value(valueAccessorFunction) tell the d3's treemap layout how to access the children of a node in your data structure and how to access the value of your node in your data structure respectively. If not specified, d3 will use node.children to get the children array of a node and node.value to get the value of your node. Consider the below example for what I just said:

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.

Hope this makes more sense.