title: D3 - Using color from JSON for chart
body: <p>I have a JSON file which looks like this:</p>
  
  <pre><code>{  
     "name":"TOPICS",
     "children":[  
        {  
           "name":"Topic A",
           "children":[  
              {  
                 "name":"Anna",
                 "size":5,
                 "text":"A story",
                 "sentiment":0.8,
                 "source":"dictionary",
                 "color":"gray"
              },
  </code></pre>
  
  <p>This is fed into a D3 chart which reads this file. What I am trying to do is like the existing fill function below:</p>
  
  <pre><code>.style("fill", function (d) { return color((d.children ? d : d.parent).data.name); });
  </code></pre>
  
  <p>To instead pull the colour from the json. In this case, gray. Can anyone please help me?</p>
  
  <p>EDIT: Based on the help below I have this code but it still does not work:</p>
  
  <pre><code>g.selectAll('g')
      .data(root.descendants())
      .enter().append('g').attr("class", "node").append('path')
      .attr("display", function (d) { return d.depth ? null : "none"; })
      .attr("d", arc)
      .style('stroke', '#fff')
      .style("fill", d =&gt; (d.children? d: d.parent).data.color);
  
  // Populate the &lt;text&gt; elements with our data-driven titles.
  g.selectAll(".node")
      .append("text")
      .attr("transform", function(d) {
          return "translate(" + arc.centroid(d) + ")rotate(" + computeTextRotation(d) + ")"; })
      .attr("dx", "-20") // radius margin
      .attr("dy", ".5em") // rotation align
      .text(function(d) { return d.parent ? d.data.name : "" });
  
  }); 
  </code></pre>