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

Question

我正在按照Mike Bostock的教程（点击此处）创建一个气泡图，但我使用的是自己的数据集和d3 v4。我对d3很陌生，我知道v4相对于v3有很多变化。我在将示例代码转换为v4时遇到了麻烦。

例如，我已将d3 v3中的此代码转换为v4：

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

出现bubble.nodes is not a function错误。在d3 v4中的等效方法是什么？

参考代码：https://jsfiddle.net/r24e8xd7

- Rajshri Mohan K S

---

你能提供一个 Fiddle 吗？ - Mehraban

@SaeedAdelMehraban 编辑后添加小提琴。 - Rajshri Mohan K S

你需要将d3添加到你的fiddle中，并稍微更改代码，从html中删除调用并移动到js中，并修复fiddle中的其他错误。 - Craicerjack

@Craicerjack，我已经在fiddle中进行了更改。 - Rajshri Mohan K S

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())

- Chirag Kothari

---

太棒了！谢谢。我认为他们应该以更适合新手的方式记录这个。所有的教程都提到d3v3，这真的让我很困惑。 - Rajshri Mohan K S

非常奇怪，但如果您将JSON键“children”更改为另一个键，例如“test”（并在代码中相应更改），则代码将无法正常工作。它会在层次结构函数中失败。 - Albert Lazaro de Lara

谢谢。你能帮我升级D3圆形图吗？https://stackoverflow.com/questions/50257606/upgrade-d3-circle-packing-graph-from-v3-to-v4 - loretoparisi

Answer 2

比较不同版本的文档，v3 # pack(root) # pack.nodes(root)

运行 pack 布局，返回与指定根节点相关联的节点数组。聚类布局是 D3 的分层布局系列的一部分。这些布局遵循相同的基本结构：布局的输入参数是分层的根节点，输出返回值是表示所有节点计算位置的数组。每个节点都填充了几个属性：

* parent - 父节点，根的父节点为 null。 * children - 子节点数组，叶节点为 null。 * value - 节点值，由值访问器返回。 * depth - 节点深度，从根开始为 0。 * x - 计算出的节点位置的 x 坐标。 * y - 计算出的节点位置的 y 坐标。 * r - 计算出的节点半径。

到更新的v4

# pack(root) <>

布置指定的根层次结构，并将以下属性分配给其后代： * node.x - 圆心的 x 坐标 * node.y - 圆心的 y 坐标 * node.r - 圆的半径

在传递分层结构到 pack 布局之前，必须调用 root.sum。您可能还想调用 root.sort 对层次结构进行排序，以便在计算布局之前对其进行排序。

看起来像是你需要的是 pack()，但在这之前你可能需要进行一些更改或两个。

更新 快速浏览不同的内容，发现有几件事情并不是简单的修复。

* 你的数据与示例完全不同，是平坦的，影响了图表。 * 为什么不使用 v3？大多数示例都是在 v3 中，就像你说的你是 d3 的新手。为什么要让事情变得困难呢。 * 最后从小做起。我建议首先尝试找到一个小的气泡图表，然后逐步增加，或者将你的数据替换为示例代码，并使其正常工作，然后逐步更改它，而不是尝试同时更改多个东西。

- Craicerjack

---

我删除了.nodes()调用，但现在出现了一个错误：“bubble.filter不是一个函数”。 - Rajshri Mohan K S

是的，你调用了过滤函数太早，在data函数中而不是在它之后。应该是.data(bubble.nodes(root)).filter(function(d) { return !d.children; }) - 根据你所遵循的示例。 - Craicerjack

无论气泡图期望数据的方式是什么，它都没有以那种方式获取到数据。 - Craicerjack