Conversion form v3 to v4: pack with 'normal' nest

[ar]

In version 3  I have:

var pack = d3.layout.pack()
    .size([width - 4, height - 4])
    .value(function(d) {return (d.weging) })                // gives  pack the road to value
    .children(function(d) {return d.values});               // gives pack the road to children

    var vis = d3.select ....
 
  var node = vis.data(tree).selectAll("g.node")
     .data(pack.nodes)
   .enter().append("g")
     .attr("class", function(d) { return d.children ? "node" : "leaf node"; })
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });


I struggle to convert this to version 4. Where can I find an example that uses an 'normal' nest?

How does pack in version 4 know which values it needs?

Like:
    var pack = d3.pack()
        .size([width - 4, height - 4])
        .padding(3);

Where to add to data?
        .each(function(d) {return (d.weging;) })
        .sum(function(d) {return (d.weging;) })
        .sort(function(a, b) { return b.weging - a.weging; });

Who can sine some light on the correct pack concept?

[Mike Bostock]

Roughly speaking, pack.children in v3 is replaced by the optional children accessor you pass to d3.hierarchy in v4, and pack.value is likewise replaced by node.sum. So you’d end up with something like this:

var root = d3.hierarchy(data, function(d) { return d.values; })

    .sum(function(d) { return d.weging; })

    .sort(function(a, b) { return b.value - a.value; });

You then pass this root to pack, your d3.pack instance. The only difference from the standard circle-packing example is that you’re using d3.hierarchy since your input data is already hierarchical, rather than d3.stratify to start with tabular data.

The last call to node.sort is optional but recommended, and note that the a and b passed to the comparator function are nodes, not data, and thus a.value and b.value refer to the sums computed in the previous step by node.sum; if you want to sort based on some data field, then you’d use a.data.foo and b.data.foo, for example. But typically you’d use the sums to sort a pack layout.

[Loreto Parisi]

Hey Mike, could you be so kind to help me wit the conversion from V3 to V4 from pack to hierarchy because from some reason it's a bit tricky: https://stackoverflow.com/questions/50257606/upgrade-d3-circle-packing-graph-from-v3-to-v4

Thank you!