D3 V4 TreeMap 错误“未捕获的错误：丢失：喜剧音乐

Question

在 V4 中，不再使用 d3.layout.treemap。所以我正在尝试使用分层 API 构建一个包含平面对象数组的树状图。我发现使用对象的平面阵列的实现在这里。

这是我目前正在尝试构建树状图的代码。

var treeData = d3.stratify()
    .id(function(d) { return d[relationMap.label]; })
    .parentId(function(d) { return d[relationMap.series]; })
    (chart.children);

// assign the name to each node
treeData.each(function(d) {
    d.name = d[relationMap.label];
});

var treemap = d3.treemap()
    .size([container.width, container.height]);

treemap(root);

svg.append("g").attr("class", "treemap");

var node = svg.select(".treemap")
    .selectAll("g")
    .data(root.leaves())
    .enter().append('g')
    .attr('transform', function (d) {
        return 'translate(0,0)';
    });

node.append('rect')
    // .call(position)
    .attr("x", function (d) {
        return d.x0 + "px";
    })
    .attr("y", function (d) {
        return d.y0 + "px";
    })
    .attr("width", function (d) {
        return d.x1 - d.x0 + "px";
    })
    .attr("height", function (d) {
        return d.y1 - d.y0 + "px";
    })
    .attr("fill", function (d, i) {
        return getColors(colors, i, d[relationMap.series]);
    })
    .attr("fill-opacity", .8)
    .attr("stroke", "#FFFFFF")
    .attr("stroke-width", "1");

node.append('text')
    // .call(position)
    .attr("x", function (d) {
        return d.x0 + "px";
    })
    .attr("y", function (d) {
        return d.y0 + "px";
    })
    .attr("width", function (d) {
        return d.x1 - d.x0 + "px";
    })
    .attr("height", function (d) {
        return d.y1 - d.y0 + "px";
    })
    .attr("transform", "translate(3, 13)")
    .text(function (d) {
        if (d.dy !== 0) {
            return d.children ? null : d[relationMap.label];
        }
    });


/* Don't display text if text is wider than rect */
var temp = svg.select(".treemap").selectAll("g").selectAll("text");
temp.attr("style", function (d) {
    if (this.getBBox().width >= (d.x1 - 2)) {
        return "display:none";
    }
    if (this.getBBox().height >= (d.y1 - 2)) {
        return "display:none";
    }
    });

使用这些数据：

[
{
    "Title": "The Wrestler",
    "MovieBudget": 6000000,
    "Genre": "Drama"
},
{
    "Title": "The Curious Case of Benjamin Button",
    "MovieBudget": 150000000,
    "Genre": "Drama"
},
{
    "Title": "An Education",
    "MovieBudget": 7500000,
    "Genre": "Drama"
},
{
    "Title": "The Tale of Despereaux",
    "MovieBudget": 60000000,
    "Genre": "Family - Animation"
},
{
    "Title": "A Simple Plan",
    "MovieBudget": 30000000,
    "Genre": "Drama"
},
{
    "Title": "Le Divorce",
    "MovieBudget": 0,
    "Genre": "Comedy - Musical"
},
{
    "Title": "The Man With the Iron Fists",
    "MovieBudget": 15000000,
    "Genre": "Action - Adventure"
},
{
    "Title": "Watchmen",
    "MovieBudget": 130000000,
    "Genre": "Action - Adventure"
},
{
    "Title": "Lords of Dogtown",
    "MovieBudget": 25000000,
    "Genre": "Drama"
},
{
    "Title": "Becoming Jane",
    "MovieBudget": 16500000,
    "Genre": "Drama"
},
{
    "Title": "As Good as It Gets",
    "MovieBudget": 50000000,
    "Genre": "Comedy - Musical"
}
]

我收到此错误：

“d3.v4.min.js:4 未捕获的错误：丢失：戏剧”

我不知道该怎么做才能解决这个问题。我在网上进行了研究，没有发现与此错误类似的内容。我已经到了绘图部分，但它只绘制了 1 个节点并占据了整个屏幕。我已经使用了大约 2 天，可以使用一些帮助。任何建议都有帮助！

作为旁注。如果可以更轻松地使用树中布局的数据，我仍然有方法可以做到这一点。

Answer 1

对于 d3.v4.js

我有一段时间被同样的问题困扰。

以下线程为我缩小了问题范围： https ://github.com/d3/d3-hierarchy/issues/33

本质上，据我了解，您必须在数据集中指定父节点才能实现 d3.stratify()。

在您引用的块中，处于平面结构中的数据具有为每个级别指定的父节点。你的数据没有。

您必须自己指定父节点和子节点。这可以通过 d3.nest() 来完成。

该块http://bl.ocks.org/mbostock/2838bf53e0e65f369f476afd653663a2 引导我找到了我的解决方案，并且应该适用于您的情况。

总而言之，我使用了：

var nest = d3.nest() // allows elements in an array to be grouped into a hierarchical tree structure
         .key() // levels in the tree are specified by key functions. can have multiple keys
         .rollup() // Specifies a rollup function to be applied on each group of leaf elements. The return value of the rollup function will replace the array of leaf values in either the associative array returned by nest.map or nest.object; for nest.entries, it replaces the leaf entry.values with entry.value.

（评论来源： https: //github.com/d3/d3-collection）

var root = d3.hierarchy({data:nest.entries(csv_data)},function(d){return d.data;})
     .sum(function(d) {return d.value; })

treemap(root)

我希望这有帮助！！！！