Javascript D3.js树映射-错误：<；rect>；属性宽度：预期长度；“南”；

我正试图在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 }
                        ]
                    }

                ]
            }

两个潜在问题：

第一，您的尺码指定不正确：

   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”：[{
“技能”：“发展”，“计数”：24，“儿童”：[
{“技能”：“爪哇”，“计数”：13}，
{“技能”：“Javascript”，“计数”：6}，
{“技能”：“分析”，“计数”：5}
]
},
{“技能”：“功能性”，“计数”：11，“儿童”：[
{“技能”：“业务分析”，“计数”：7}，
{“技能”：“PMO”，“计数”：1}，
{“技能”：“敏捷”，“计数”：3}
]
}
]
};
var宽度=400；var高度=200；
var图表=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
const treeMap=d3.treeMap（）
.尺寸（[宽度、高度]）
const root=d3.层次结构（数据）
.sum（（d）=>{console.log（d）；返回d.count}）
树形图（根）；
常量单元格=图表。选择全部（“g”）
.data（root.leaves（））
.输入（）
.附加（“g”）
颜色=d3.SchemeCategory 20；
cell.append（“rect”）
.attr（“id”，（d）=>{return d.data.id；}）
.attr（“填充”，（d，i）=>{return color[i%20]；}）
.attr（“宽度”，（d）=>{return d.x1-d.x0；}）
.attr（“height”，（d）=>{return d.y1-d.y0；}）

---

你把这个代码放在哪里？你确定了

x1

和

x0

是数值，并且它们存在于

root.leaves（）

中的每个对象吗？@SimonBilsky Rollins x0是0，x1是NaN，所以我猜这是错的。我还以为它们是自动设定的呢？如何确保它们是正确的值？抱歉，如果这是一个愚蠢的问题，我是一个文字初学者，这有可能看到你的json吗？@Andrewerid已经用JSONAH编辑了主要帖子。就是这样，非常感谢，让我很恼火，我错过了那些小东西