title: D3 pie chart rendering in only one color
body: <p>I am building a pie chart using the D3 library. Everything is going smoothly except for the colours. Data are stored in the normal Object format.</p>
  <p>I defined colour variable as :</p>
  <pre><code>    var color = d3.scaleOrdinal()
              .range(d3.schemeCategory10);
  </code></pre>
  <p>and my enter selection binding code is:</p>
  <pre><code>        var g = svg.selectAll(&quot;path&quot;)
                .data(pieArcs, keyField)
                .style(&quot;fill&quot;, function(d) { return color(d.data.key); });
  
          var g2 = g
              .enter()
              .append(&quot;path&quot;)
              .each(function(d) { this.dPrevious = d; })
              .style(&quot;fill&quot;, function(d) { return color(d.data.key); })
              .attr('fill', d =&gt; color(d.data.key))
  </code></pre>
  <p>Changed every aspect, checked all D3 pie charts examples, reached the bottom of the internet, but only getting this (everything else is working):</p>
  <p><a href="https://i.stack.imgur.com/x4fZz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/x4fZz.png" alt="pie chart" /></a></p>
  <p>All I need is to have every arc distinguished in different color.</p>