Error: <path> attribute d: Expected number, "….35254915624212LNaN,NaNZ"

Question

I am trying to build pie-chart using D3js. I am getting an error while running the code and pie chart is not coming properly. This is the code:

     var svg = d3.select('#pie_chart')        
      .append('svg')
      .attr('width', width) 
      .attr('height', height) 
      .append('g')              
      .attr('transform', 'translate(' + (width / 2) +
            ',' + (height / 2) + ')');      
      var total=0;
      for(var a=0;a<data.length;a++){
        total=total+parseInt(data[a].count); 
      }
      var pie_data=[];
      for( var a=0;a<data.length;a++){
        pie_data[a]=(data[a].count/total)*100;
      }
      var arc = d3.arc().outerRadius(150);
      var pie = d3.pie()
      .value(function(d,i) {
        return pie_data[i];
      }).sort(null);

      var path = svg.selectAll('path')
      .data(pie(data))
      .enter().append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return data[i].color;
      });

Answer 1

Set innerRadius property of d3 arc.

var arc = d3.arc().outerRadius(150).innerRadius(0);

var width = 500,
  height = 400;

var data = [{
  count: 10,
  color: 'black'
}, {
  count: 20,
  color: 'green'
}, {
  count: 30,
  color: 'blue'
}];

var svg = d3.select('#pie_chart')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
  .attr('transform', 'translate(' + (width / 2) +
    ',' + (height / 2) + ')');

var total = 0;
data.forEach(function(d) {
  total += d.count;
});

var pie_data = [];
for (var a = 0; a < data.length; a++) {
  pie_data[a] = (data[a].count / total) * 100;
}

var arc = d3.arc().outerRadius(150).innerRadius(0);

var pie = d3.pie()
  .sort(null)
  .value(function(d) {
    return d;
  });

var path = svg.selectAll('path')
  .data(pie(pie_data))
  .enter().append('path')
  .attr('d', arc)
  .attr('fill', function(d, i) {
    return data[i].color;
  });

.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}

.arc path {
  stroke: #fff;
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="pie_chart"></div>