Bubbles Disappeared After Converting D3v3 To D3v4

I am trying to build a bubble chart using d3. Everything was good in d3 v3. But after changed to d3 v4, the bubbles disappeared. It seems the code below doesn't work in v4. The fun

Solution 1:

The ".value" can't be used in d3v4. It needs to be changed to:

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

In order to get nodes, you need to use pack(root).descendants(). For the root, get it from the d3.hierarchy. Hope this will help someone.

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