javascript - Label names are not displayed from input data in pie transition chart of d3.js -
i using d3.js draw pie transition chart. when labels placed in data array show below:
data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}] the pie chart won't displayed. instead "nan" printed.
the complete code pasted below:
var w = 400, h = 400, r = math.min(w, h) / 2, data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}], // data label-value pairs color = d3.scale.category20(), arc = d3.svg.arc().outerradius(r), donut = d3.layout.pie(); var vis = d3.select("body").append("svg") // place chart in 'pie-chart-div' .data([data]) .attr("width", w) .attr("height", h); var arcs = vis.selectall("g.arc") .data(donut) .enter().append("g") .attr("class", "arc") .attr("transform", "translate(" + r + "," + r + ")"); var paths = arcs.append("path") .attr("fill", function(d, i) { return color(i); }); var labels = arcs.append("text") .attr("transform", function(d) { d.innerradius = 120; return "translate(" + arc.centroid(d) + ")"; }) .attr("dy", ".35em") .text(function(d) { return d.value; }); paths.transition() .ease("bounce") .duration(2000) .attrtween("d", tweenpie); paths.transition() .ease("elastic") .delay(function(d, i) { return 2000 + * 50; }) .duration(750) .attrtween("d", tweendonut); function tweenpie(b) { b.innerradius = 0; var = d3.interpolate({startangle: 0, endangle: 0}, b); return function(t) { return arc(i(t)); }; } function tweendonut(b) { b.innerradius = r * .6; var = d3.interpolate({innerradius: 0}, b); return function(t) { return arc(i(t)); }; } <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> how display label names along values in chart ?
you need call donut data inside :
data2 = data.map(function(d) { return d.value}) // [25, 45] ... .data(donut(data2)) and call label ;
.text(function(d, i) { return data[i].label; });
Comments
Post a Comment