D3.js TreeMap - Error: <rect> attribute width: Expected length, "NaN"

Question

I'm trying to create a treemap diagram in D3 in ReactJS, below is my code, I'm getting this error but can't figure out why:

Error: attribute width: Expected length, "NaN".

    const chart = d3.select(this.node)

    const treeMap = d3.treemap()
        .size(this.state.width, this.state.height)

    d3.json("treemap.json", (error, data) => {
        if (error) throw error;
        console.log(data)
        const root = d3.hierarchy(data)
            .sum((d) => { return d.size })

        treeMap(root);
        console.log(root)

        const cell = chart.selectAll("g")
            .data(root.leaves())
            .enter()
            .append("g")

        cell.append("rect")
            .attr("id", (d) => { return d.data.id; })
            .attr("width", (d) => { return d.x1 - d.x0; })
            .attr("height", (d) => { return d.y1 - d.y0; })

Any help would be really appreciated. Thanks!

Edit: See below for my json

 {
                "Skill": "General", "children": [
                    {
                        "Skill": "Dev", "count": 24, "children": [
                            { "Skill": "Java", "count": 13 },
                            { "Skill": "Javascript", "count": 6 },
                            { "Skill": "Analytics", "count": 5 }
                        ]
                    },
                    {
                        "Skill": "Functional", "count": 11, "children": [
                            { "Skill": "Business Analysis", "count": 7 },
                            { "Skill": "PMO", "count": 1 },
                            { "Skill": "Agile", "count": 3 }
                        ]
                    }

                ]
            }

Answer 1

Two potential issues:

One, your size is not specified correctly:

   const treeMap = d3.treemap()
        .size(this.state.width, this.state.height)

This should be an array: .size([width,height])

And, based on your data, what is being summed here:

const root = d3.hierarchy(data)
    .sum((d) => { return d.size })

I believe you are trying to sum d.count, rather than d.size, which is undefined (see console.log statements when running this function). Altogether, this gives:

var data =  { "Skill": "General", "children": [{
  "Skill": "Dev", "count": 24, "children": [
    { "Skill": "Java", "count": 13 },
    { "Skill": "Javascript", "count": 6 },
    { "Skill": "Analytics", "count": 5 }
   ]
  },
  { "Skill": "Functional", "count": 11, "children": [
    { "Skill": "Business Analysis", "count": 7 },
    { "Skill": "PMO", "count": 1 },
    { "Skill": "Agile", "count": 3 }
  ]
 }
]
};

var width = 400; var height = 200;

var chart = d3.select("body")
  .append("svg")
  .attr("width",width)
  .attr("height",height);

const treeMap = d3.treemap()
  .size([width, height])

const root = d3.hierarchy(data)
  .sum((d) => { console.log(d); return d.count })

treeMap(root);


const cell = chart.selectAll("g")
  .data(root.leaves())
  .enter()
  .append("g")
  
color = d3.schemeCategory20;

cell.append("rect")
  .attr("id", (d) => { return d.data.id; })
  .attr("fill", (d,i) => { return color[i%20]; })
  .attr("width", (d) => { return d.x1 - d.x0; })
  .attr("height", (d) => { return d.y1 - d.y0; })

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>