D3泡泡图'bubble.nodes不是函数' [英] D3 Bubble Chart 'bubble.nodes not a function'

问题描述

我正在关注Mike Bostock的教程此处以创建气泡图......除此之外我正在使用自己的数据集，而我正在使用d3 v4。我对d3很新，我理解v4中v4的变化很多。我将示例代码转换为v4时遇到了问题。

I'm following Mike Bostock's tutorial here to create a bubble chart... except that I'm using my own dataset and I'm using d3 v4. I'm quite new to d3 and I understand a lot has changed in v4 from v3. I'm having trouble converting the sample code to v4.

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

For instance, I've converted this code in 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);

以上是否正确？我不确定，因为到目前为止我没有任何错误。

Is the above correct? I'm not sure since I'm not having any errors till this point.

但我在以下代码中收到错误：

But I get an error in the following piece of code:

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中的等价物是什么？

with a bubble.nodes is not a function. What is the equivalent in d3 v4?

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

推荐答案

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

Here is your updated fiddle: https://jsfiddle.net/r24e8xd7/9/.

Root应使用d3.hierarchy构造节点：

Root node should be constructed using d3.hierarchy:

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

然后可以调用包布局：

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

这篇关于D3泡泡图'bubble.nodes不是函数'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！