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

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>