Question

一个简单的问题。我有一个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是有效的。

Answer 1

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

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

有一个更好的解释here。

编辑：啊......我的坏。我错误地将'Treemap'误认为'Tree'道歉，这个答案对我来说无济于事。道歉。

Answer 2

在D3中，有布局函数将数据转换为具有布局数据的节点;添加了dx，dy，x，y等。

如果您在撰写本文时使用的是最新版本的D3版本4，则API会略有不同。

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

在版本4中，该行应为：

d3.hierarchy(data)

这是D3最新版本中不同布局功能的好教程。希望有所帮助。您的布局功能可能会有所不同，具体取决于您尝试创建的TreeMap类型。（Partition，vanilla TreeMap等）

http://d3indepth.com/layouts/

带有d3的树形图：x，y，dx和amp; dy是NaN

2 个答案: