Search code examples
javascriptd3.jstreemap

Is it possible to create a treemap when any column is called "value"


I'm new with d3 and I try to create a treemap. I noticed that my code works when a key is named "value", and don't if I call my key "size" for example.

my probleme start at the very first lines :

d3.json("dataZC.json", function(err, data)
{
    var treemap =d3.layout.treemap()
          .size([500,500])
          .nodes(data);
console.log(treemap);
}

My data looks like that

{
 "name": "flare",
 "children": [
  {"name": "analytics",
   "children": [
     {"name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "HierarchicalCluster", "size": 6714},
      {"name": "MergeEdge", "size": 743}
     ]},
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731},
      {"name": "MaxFlowMinCut", "size": 7840},
      {"name": "ShortestPaths", "size": 5914},
      {"name": "SpanningTree", "size": 3416}
     ]}

     ,........ 

   ]}
]}

If someone has a solution to use treemap with any keys, I#d be very grateful. Thanks.


Solution

  • From the fine manual :

    treemap.value([value])
    If value is specified, sets the value accessor to the specified function. If value is not specified, returns the current value accessor, which assumes that the input data is an object with a numeric value attribute:

    function value(d) {
        return d.value;
    }
    

    Use

    treemap = d3.layout.treemap()
        .value(function(d) {
            return d.size;
        })