将 d3v3 转换为 d3v4 后气泡消失答案

【问题标题】：Bubbles disappeared after converting d3v3 to d3v4将 d3v3 转换为 d3v4 后气泡消失
【发布时间】：2017-09-01 03:04:22
【问题描述】：

我正在尝试使用 d3 构建气泡图。 d3 v3 中的一切都很好。但是改到d3 v4后，气泡消失了。似乎下面的代码在 v4 中不起作用。函数“value”被改成了其他东西。

pack = d3.pack()
    .padding(2)
    .size([this.diameter - this.margin, this.diameter - this.margin])
    .value(function (d) { return d.size; });

这是 D3 V3 中的示例。如何将其更改为 d3 v4？ https://embed.plnkr.co/qM3qrk3swvalQFBh1Db1/

谢谢！

【问题讨论】：

Mike 有一个很棒的 v4 示例 here
谢谢！我解决了我的问题。只改了几行。主要不同的是root = d3.hierarchy(root) .sum(function(d) { return d.size; }) .sort(function(a, b) { return b.value - a.value; });
太棒了！考虑在下面发布您的答案并接受它，以便其他人可以看到。

标签： javascript angular d3.js

【解决方案1】：

“.value”不能在 d3v4 中使用。需要改成：

  let pack = d3.pack()
    .size([diameter - margin, diameter - margin])
    .padding(2);

为了获取节点，您需要使用pack(root).descendants()。对于根，从 d3.hierarchy 中获取它。希望这会对某人有所帮助。

  let root = d3.hierarchy(root)
      .sum(function(d) { return d.size; })
      .sort(function(a, b) { return b.value - a.value; });

  let nodes = pack(root).descendants();

【讨论】：