title: Need help converting d3.pack() from v3 to v4
body: <p>The following code worked in d3 v3:</p>
  
  <pre><code>// 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
  </code></pre>
  
  <p>I'm have a really hard time understanding the new <code>d3.pack()</code> and <code>d3.hierarchy()</code> in v4. I know I'm supposed to put some of logic inside <code>sum()</code> for <code>hierarchy</code> but I can't wrap my head around it.</p>