D3泡泡图'bubble.nodes不是函数'

Question

我下面的迈克·博斯托克的教程在这里创建一个气泡图......只是我用我自己的数据集,我使用D3 V4.我对d3很新,我理解v4中v4的变化很多.我将示例代码转换为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 is not a function.d3 v4中的等价物是什么？

小提琴:https://jsfiddle.net/r24e8xd7

Answer 1

这是您更新的小提琴: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())