は、次のコードは、D3 v3ので働いていた

Question

V4するV3から（）d3.pack変換についてのヘルプが必要です：

私は

// 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 

は本当に苦労V4の新しいd3.pack()とd3.hierarchy()を理解しています。私はのために私はいくつかのロジックをsum()の中に入れなければならないことを知っていますが、私はそれの周りに私の頭を包み込むことはできません。

Answer 1

私はこのようにそれを考え出し：

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