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/