title: D3.js - Problem in filling colors in piechart
body: <p>I am not able to fill the colours in pie chart designed using D3.js</p>
  
  <pre><code>   var chartData =[];
     // var rcolor = d3.scale.ordinal(d3.schemeDark2);
      color = d3.scale.category20c();
      function plot(data) {
          chartData = data;
          console.log("piechart.js executing");
          TransformChartData(chartData, chartOptions);
          BuildPie("chart", chartData, chartOptions);
      }
  
      function BuildPie(id, chartData, options) {
  
          var divisionRatio = 2.5;
          var legendoffset = 0;
  
          chart = d3.select("#" + id + " .innerCont");
          var xVarName = options[0].xaxis;
          var yVarName = options[0].yaxis;
          width = $(chart[0]).outerWidth(),
          height = $(chart[0]).outerHeight(),
          radius = Math.min(width, height) / divisionRatio;    
  
          arc = d3.svg.arc()
                  .outerRadius(radius)
                  .innerRadius(radius - 200);
  
          chart = chart
                  .append("svg")  //append svg element inside #chart
                  .attr("width", width)    //set width
                  .attr("height", height)  //set height
                  .append("g")
                  .attr("transform", "translate(" + (width / divisionRatio) + "," + ((height / divisionRatio) + 30) + ")");
  
          var pie = d3.layout.pie()
                      .sort(null)
                      .value(function (d) {
                          return d.data;
                      });
  
          var g = chart.selectAll(".arc")
                      .data(pie(runningData))
                      .enter().append("g")
                      .attr("class", "arc");
  
          var count = 0;
          var path = g.append("path")
                      .attr("d", arc)
                      .attr("fill", function(d, i) {return color(i)});
  
          g.append("text")
           .attr("transform", function (d) { return "translate(" + arc.centroid(d) + ")"; })
           .attr("dy", ".35em")
           .style("text-anchor", "middle")
           .style("opacity", 1)
           .text(function (d) {
               return d.data.bankName + " (" + d.data.data + ")";
           });
      }
  
      function TransformChartData(chartData, opts) {
          var result = [];
          var yVarName = opts[0].yaxis;
          var xVarName = opts[0].xaxis;
  
          for (var i in chartData) {
                  ditem = {};
                  ditem[xVarName] = chartData[i][xVarName];
                  ditem[yVarName] = chartData[i][yVarName];
                  result.push(ditem);
          }
          runningData = result;
          return;
      }
  
      var chartOptions = [{
          "xaxis": "bankName",
          "yaxis": "data"
      }]
  </code></pre>
  
  <p>Chart is getting generated using chartData, but the color is not getting filled inside piechart. Any way to fill the colours in piechart randomly ? Can someone help in idenfying the problem and way to work with this.Thanks in advance :)</p>