带有 d3 的树形图：x、y、dx 和 dy 是 NaN答案

【问题标题】：Treemap with d3: the x, y, dx & dy are NaN带有 d3 的树形图：x、y、dx 和 dy 是 NaN
【发布时间】：2014-12-03 08:34:46
【问题描述】：

一个简单的问题。我对 d3 treemap 方法有疑问。当我加载这个脚本时，所有的 x 都是 0，控制台告诉我 y、dy 和 dx 不是数字。我做错了什么？

var colorScale=d3.scale.category10();

var canvas9 = d3.select(".result-side9")
.append("svg")
.attr("width", 600)
.attr("height", 600)
.attr("transform","translate(10,10)");

d3.json("assemblee5.json", function (data) {
    var treemap = d3.layout.treemap()
        .size(550,550)
        .nodes(data);

    var cells= canvas9.selectAll(".cell")
        .data(treemap)
        .enter()
            .append("g")
            .attr("class", "cell");

    cells.append("rect")
        .attr("x", function (d){return d.x; })
        .attr("y", function (d,i){return d.y; })
        .attr("width", function (d,i){return d.dx; })
        .attr("height", function (d,i){return d.dy; })
        .attr("fill", function (d,i){return d.children ? null : colorScale(d.parent.name); })
        .attr("stroke", "white");

    cells.append("text")
        .attr("x", function (d,i){return d.x + d.dx/2; })
        .attr("y", function (d,i){return d.y + d.dy/2; })
        .text(function (d){return d.children ? "" : d.name;})
        .attr("text-anchor", "middle");
});

JSonLint 告诉我我的 Json 是有效的。

【问题讨论】：

您的 JSON 文件的结构如何？
谢谢。你去吧。 victoralexandre.fr/assemblee5.json
遇到同样的问题此代码反映的是旧版本的 D3（版本 3）。这是另一个执行相同操作但使用最新版本（版本 4）的示例。 bl.ocks.org/d3indepth/379926741d6600ab6c8af7f5f8707373 第 4 版以我更容易理解的方式做事。希望这会有所帮助。

标签： javascript d3.js nan treemap

【解决方案1】：

首先你的 json 是有效的。如果您将示例 here 与您的 json 文件一起使用，则可以正常工作。

我确实注意到的一件事是您没有定义树的“根”、“节点”或“链接”。查看http://bl.ocks.org/d3noob/8329447 的示例，您会注意到为树形图形成数据的过程需要设置这些。

有更好的解释here。

编辑：啊……我的错。我把“树图”误认为“树”道歉，这个答案没有多大帮助。道歉。

【讨论】：

谢谢。这些是树的示例，我设法用相同的数据创建树，但这是一个树图，我不明白是什么让 x、y、dx 和 dy 突然变成了 NaN。我已经尝试过 parseInt(d.x) 技巧...不成功。
嗨。一些新闻。创建条形图时，我只有 y 和 height 的问题。当我从@mbostock 从这里bl.ocks.org/mbostock/3885304#data.tsv 重新创建条形图示例时，我在控制台中得到了这个： Valeur NaN inattendue lors de l'analysis de l'attribut y。 d3.min.js:1 Valeur NaN inattendue lors de l'analysis de l'attribut 高度。我在 Firefox 32.0.3 中运行它。会不会有些不兼容？
不。我有一些其他 D3 图表加载良好，但我真的不知道为什么与 M.B. 完全相同的图表。不起作用，控制台会用 y 和 height 属性告诉我这些事情。
好的。这是解决这个问题的方法。创建一个包含您的代码的 bl.ock 并将链接粘贴到此处。我们的意思是，我们可以确保没有什么简单的东西让你绊倒，我们可以与 Mike 的代码进行简单的比较。
感谢您的提示。我很想这样做，但不幸的是，我的计算机并不想让我这么容易地做到这一点，hombrew、node 和 sublime text 的安装都不想按计划进行。所以我想，这样做会不会：victoralexandre.fr/pb-d3_2.html（对于 mbostocks 的确切示例-除了 tsv、csv 的东西）和这个 victoralexandre.fr/examplestackoverflow 用于树形图

【解决方案2】：

在D3中，有布局函数，将数据转换成带有布局数据的节点；添加了 dx、dy、x、y 等。

如果您使用的是最新版本的 D3，即撰写本文时的第 4 版，那么 API 会有些不同。

版本 3 中的以下行 d3.layout.treemap()

在版本 4 中，该行应该是：

d3.hierarchy(data)

这里有一个关于 D3 最新版本中不同布局功能的很好的教程。希望有帮助。您的布局功能可能会有所不同，具体取决于您尝试创建的 TreeMap 类型。（分区、原版 TreeMap 等）

http://d3indepth.com/layouts/

【讨论】：