javascript - D3 气泡图 'bubble.nodes not a function'

Question

我正在学习 Mike Bostock 的教程 here创建气泡图...除了我使用自己的数据集并且我使用的是 d3 v4。我对 d3 很陌生，我知道 v4 与 v3 相比发生了很多变化。我在将示例代码转换为 v4 时遇到问题。

例如，我在 d3 v3 中转换了这段代码:

var bubble = d3.layout.pack()
    .sort(null)
    .size([diameter, diameter])
    .padding(1.5);

到:

var bubble = d3.pack(dataset)
        .size([diameter, diameter])
        .padding(1.5);

以上说法正确吗？我不确定，因为到目前为止我没有遇到任何错误。

但是我在下面的代码中得到了一个错误:

var node = svg.selectAll(".node")
        .data(
            bubble.nodes(root)
            .filter(function(d) {
                return !d.children;
            })
        )
        .enter()
        .append("g")
        .attr("class", "node")
        .attr("transform", function(d) {
            return "translate(" + d.x + "," + d.y + ")";
        });

bubble.nodes 不是函数。 d3 v4 中的等价物是什么？

fiddle :https://jsfiddle.net/r24e8xd7

Answer 1

这是您更新的 fiddle :https://jsfiddle.net/r24e8xd7/9/ .

根节点应使用 d3.hierarchy 构建:

 var nodes = d3.hierarchy(dataset)
            .sum(function(d) { return d.responseCount; });

然后可以调用包布局:

var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())