title: Adding elements to hierarchy for circle packing colours
body: <p>I am trying to set a specific colour of my circles using the circle packing example (<a href="https://bl.ocks.org/mbostock/4063269#index.html" rel="nofollow noreferrer">https://bl.ocks.org/mbostock/4063269#index.html</a>) based on an number in my data. However when I use:</p>
  
  <pre><code>node.append("circle")
      .attr("id", function(d) { return d.id; })
      .attr("r", function(d) { return d.r; })
      .style("fill", function(d) { return d.color });
  </code></pre>
  
  <p>with the data:</p>
  
  <pre><code>var classes = [
      { id: '1', value: 1, color: '#42f445' },
      { id: '2', value: 2, color: '#f44141' },
      { id: '3', value: 3, color: '#42f445' },
      { id: '4', value: 4, color: '#f44141' },
      { id: '5', value: 5, color: '#42f445' },
      { id: '6', value: 6, color: '#f44141' },
      { id: '7', value: 7, color: '#42f445' }
  ];
  </code></pre>
  
  <p>and the root:</p>
  
  <pre><code>var root = d3.hierarchy({ children: classes })
      .sum(function(d) { return d.value; })
      .each(function(d) {
          if (id = d.data.id) {
              var id, i = id.lastIndexOf(".");
              d.id = id;
              d.package = id.slice(0, i);
              d.class = id.slice(i + 1);
          }
      });
  </code></pre>
  
  <p>It just shows the circles all black?</p>
  
  <p>How would I fix this?</p>