Using a Custom Color Accessor

Let’s take our Getting Started example and color the rectangles by their parent groups.

var data = [
  {color: "cornflowerblue", parent: "Group 1", id: "alpha", value: 29},
  {color: "cornflowerblue", parent: "Group 1", id: "beta", value: 10},
  {color: "cornflowerblue", parent: "Group 1", id: "gamma", value: 2},
  {color: "firebrick", parent: "Group 2", id: "delta", value: 29},
  {color: "firebrick", parent: "Group 2", id: "eta", value: 25}
];

Given the new "color" variable present in each data point, we can tell the treemap instance to use our specific color for each rectangle’s fill attribute. All methods that the Rect class makes available are accessible via the shapeConfig method:

new d3plus.Treemap()
  .data(data)
  .groupBy(["parent", "id"])
  .shapeConfig({fill: function(d) { return d.color; }})
  .render();