D3 气泡图“bubble.nodes 不是函数”

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

例如，我在 d3 v3 中转换了以下代码：

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

to:

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 + ")";
        });

with a bubble.nodes is not a function。 d3 v4 中的等效项是什么？

Fiddle: https://jsfiddle.net/r24e8xd7 https://jsfiddle.net/r24e8xd7/5/

这是您更新的小提琴：https://jsfiddle.net/r24e8xd7/9/ https://jsfiddle.net/r24e8xd7/9/.

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

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

然后可以调用packlayout：

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