Search code examples
javascriptd3.jspartitionicicle-diagram

d3.js v4 Partition where parent's value is greater than sum of its children (node.sum)


I know, in d3.js v4, it is possible that parent's value is greater than sum of its children by using the d3.v4 hierarchy().sum()

I also know that the hierarchy().sum() function will return a value that is a sum of the node and its children.

However, I only want to draw the respective rectangular that contains its value only (not the sum of its value plus the sum of its children)

Is it possible?

For example, this is the JSON file:

{"name":"Top Level", "size": "50000" ,"children":[{"name":"Level 2: A","size":"10000","children":[{"name":"Son of A","size":"2000"},{"name":"Daughter of A","size":"3000"}]},{"name":"Level 2: B","size":"1000"}]}

So for Top Level, I only a box with size 50000. (not 50000+10000+2000+3000+1000 = 66000)


Solution

  • You can manually override values of hierarchy object and skip sum function

    var rawData = {
      "name": "Top Level",
      "size": "50000",
      "children": [
        {
          "name": "Level 2: A",
          "size": "10000",
          "children": [
            {
              "name": "Son of A",
              "size": "2000"
            },
            {
              "name": "Daughter of A",
              "size": "3000"
            }
          ]
        },
        {
          "name": "Level 2: B",
          "size": "1000"
        }
      ]
    }
    
    var root = d3.hierarchy(rawData);  //apply hierarchy 
    
    
    root.each(d=> d.value = +d.data.size); //override values