Javascript D3 V4树映射错误“；未捕获的错误：缺失：喜剧音乐剧

对于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未捕获错误：缺失：戏剧性”

我不知道该怎么解决这个问题。我在网上进行了调查，没有发现类似的错误。我已经到了绘图部分，但它只画了一个节点，它占据了整个屏幕。我已经做了大约两天了，需要一些帮助。任何建议都有帮助

作为旁注。如果它使使用树中的数据变得更容易，那么我仍然有这样做的方法。

对于d3.v4.js

我被同一个问题困扰了一段时间

以下线索为我缩小了问题的范围：

基本上，据我所知，必须在数据集中指定父节点才能实现d3.stratify（）

在参照的块中，处于平面结构中的数据具有为每个标高指定的父节点。您的数据不正确

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

这个街区 引导我找到了我的解决方案，应该适用于你的情况

总之，我使用了：

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.

（评论来源：）

---

我希望这有帮助

遇到相同的错误，您是否解决了此问题？

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

treemap(root)