Имена ярлыков не отображаются на входных данных в диаграмме переходных диаграмм d3.js

Question

Я использую d3.js для рисования диаграммы перехода пирога. Но когда метки помещаются в массив данных, как показано ниже:

data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}] 

Круговая диаграмма не будет отображаться. Вместо этого будет напечатан «NaN».

Полный код вставлен ниже:

var w = 400, 
h = 400, 
r = Math.min(w, h)/2, 
data = [{"label":"sector1", "value":25}, {"label":"sector2", "value":45}], // Data with 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 the 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 + i * 50; }) 
    .duration(750) 
    .attrTween("d", tweenDonut); 

function tweenPie(b) { 
    b.innerRadius = 0; 
    var i = d3.interpolate({startAngle: 0, endAngle: 0}, b); 
    return function(t) { 
    return arc(i(t)); 
    }; 
} 

function tweenDonut(b) { 
    b.innerRadius = r * .6; 
    var i = 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> 

Как отобразить имена меток вместе со значениями в таблице?

Answer 1

Вы должны вызвать donut с вашими данными внутри так:

data2 = data.map(function(d) { return d.value}) // [25, 45] 
... 
.data(donut(data2)) 

, а затем вызвать метку;

.text(function(d, i) { return data[i].label; }); 

См http://jsfiddle.net/980f0cdj/1/