javascript - D3 V4 TreeMap 报错“Uncaught Error : missing: Comedy-Musical

Question

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

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

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 Uncaught Error: missing: Drama"

而且我不确定该怎么做才能解决这个问题。我在网上进行了研究，没有发现与此错误类似的内容。我已经进入了绘图部分，但它只绘制了 1 个节点并且占据了整个屏幕。我已经工作了大约 2 天，需要一些帮助。任何建议都有帮助!

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

Answer 1

对于 d3.v4.js

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

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

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

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

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

这个 block 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)

希望对您有所帮助!!!!