D3.js TreeMap - 错误：<rect> 属性宽度：预期长度，“NaN”

Question

我正在尝试在 ReactJS 中的 D3 中创建树形图，下面是我的代码，我收到此错误但不知道原因：

错误：属性宽度：预期长度，“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; })

任何帮助将不胜感激。谢谢！

编辑：我的 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

两个潜在问题：

一，你的尺码没有指定正确：

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

这应该是一个数组：.size([width,height])

并且，根据您的数据，这里总结了什么：

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

我相信您正在尝试求和 d.count，而不是未定义的 d.size（请参阅运行此函数时的 console.log 语句）。总之，这给出了：

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>