D3 how to fix no root in treemap?-CodePudding

i do treemap project for freecodecamp got an error(console) no root. could u help me? what do i do wrong?

https://codepen.io/DeanWinchester88/pen/xxrjLrM

  const root  = d3.stratify()
                  .id(  (d) =>  d.name)
                  .parentId(  (d) => d.parent)
                  (gameData)

CodePudding user response：

The d3-hierarchy documentation says

Before you can compute a hierarchical layout, you need a root node. If your data is already in a hierarchical format, such as JSON, you can pass it directly to d3.hierarchy; otherwise, you can rearrange tabular data, such as comma-separated values (CSV), into a hierarchy using d3.stratify.

Your data is already in a hierarchical format, so you don't need to use d3.stratify.

Furthermore, the documentation says

You must call node.sum or node.count before invoking a hierarchical layout that requires node.value, such as d3.treemap.

Following this, your code for processing your data can look like this:

// the plus sign turns the string into a number
const hierarchy = d3.hierarchy(gameData).sum(d =>  d.value);
  
const treemap = d3.treemap()
  .size([width, height])
  .padding(4);
  
const root = treemap(hierarchy);

Lastly, for setting the width attribute, you have .attr("width", (d) => d.x1 - d.x2) but it should be .attr("width", (d) => d.x1 - d.x0)