Benötigen Sie Hilfe Umwandlung d3.pack() von v3

Question

Der folgende Code in v4 in d3 v3 gearbeitet:

// data truncated for brevity 
var data.inner = [{ 
    "candidate": "hillary", 
    "data": [{ 
     "committee.name": "CITIZENS UNITED SUPER PAC LLC", 
     "candidate": "hillary", 
     "spent": 2243599 
    }, { 
     "committee.name": "FREEDOM'S DEFENSE FUND", 
     "candidate": "hillary", 
     "spent": 2481851 
    }] 
}, { 
    "candidate": "trump", 
    "data": [{ 
     "committee.name": "CITIZENS UNITED SUPER PAC LLC", 
     "candidate": "trump", 
     "spent": 255281 
    }, { 
     "committee.name": "CLUB FOR GROWTH ACTION", 
     "candidate": "trump", 
     "spent": 14869434 
    }] 
}] 

var bubble_inner = d3.layout.pack() 
    .value(function(d) { 
     // This returns a sum in integer 
     // ex. Hillary returns 4725450 = 2243599 + 2481851 
     return _(d.data).chain() 
      .pluck("spent") 
      .reduce(function(memo, num) { 
       return memo + num; 
      }, 0) 
      .value(); 
    }) 
    .sort(null) 
    .size([2 * radius_pack, 2 * radius_pack]) 
    .padding(padding_pack); 

var node_inner_g = inner.selectAll("g.node_inner") 
    .data(
     bubble_inner.nodes({ children: data.inner }) 
      .filter(function(d) { 
       return !d.children; 
      }) 
    ) 
    .enter() 
    .append("g") 
    // do stuff 

Ich bin eine wirklich harte Zeit das Verständnis der neuen d3.pack() und d3.hierarchy() in v4. Ich weiß, dass ich etwas Logik in sum() für hierarchy setzen sollte, aber ich kann meinen Kopf nicht darum wickeln.

Answer 1

Habe ich es wie folgt aus:

var bubble_inner = d3.pack() 
    .size([2 * radius_pack, 2 * radius_pack]) 
    .padding(padding_pack); 

var root = d3.hierarchy({"children": data.inner}) 
    .sum(function(d) { 
     return _(d.data).chain() 
      .pluck("spent") 
      .reduce(function(memo, num) { 
       return memo + num; 
      }, 0) 
      .value(); 
    }); 

var node_inner_g = inner.selectAll("g.node_inner") 
    .data(
     bubble_inner(root).children 
    ) 
    .enter() 
    .append("g") 
     .attr("class", function(d) { 
      return "node_inner " + d.candidate; 
     }) 
     .attr("transform", function(d) { 
      return "translate(" + [d.x, d.y] + ")"; 
     });