需要幫助從V3轉換d3.pack（）到V4

Question

下面的代碼在D3 V3工作：

// 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()裏面加入一些邏輯hierarchy，但是我無法將它包裹起來。

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