無法想象在圓環圖標籤 - D3

我試圖繪製使用D3的基礎上，這兩個例子圓環圖：無法想象在圓環圖標籤 - D3

http://bl.ocks.org/mbostock/3887193 http://jsfiddle.net/ragingsquirrel3/qkHK6/

不過，我看不到標籤的數據。這裏可以找到一個小例子：

我不知道我錯過了什麼。

jsonArr = [{ 
    "label": "13", 
    "value": 13.17435599605977 
}, { 
    "label": "11", 
    "value": 10.599857294624265 
}, { 
    "label": "16", 
    "value": 16.06213289774901 
}, { 
    "label": "14", 
    "value": 13.511044375821099 
}, { 
    "label": "11", 
    "value": 10.664713102997277 
}, { 
    "label": "15", 
    "value": 14.563786284297807 
}, { 
    "label": "16", 
    "value": 16.00697524769618 
}, { 
    "label": "14", 
    "value": 14.359596161811186 
}, { 
    "label": "16", 
    "value": 16.30948044715333 
}, { 
    "label": "12", 
    "value": 11.667434335739946 
}, { 
    "label": "9", 
    "value": 8.906828269284498 
}, { 
    "label": "12", 
    "value": 12.184727712259644 
}, { 
    "label": "29", 
    "value": 28.91564471677896 
}, { 
    "label": "15", 
    "value": 14.794540561843725 
}, { 
    "label": "7", 
    "value": 6.75160611562344 
}, { 
    "label": "15", 
    "value": 15.200055092907874 
}, { 
    "label": "41", 
    "value": 41.432547293738104 
}, { 
    "label": "12", 
    "value": 11.871964986439362 
}] 

var colorrange = [ 
    "#7f3b08", 
    "#a50026", 
    "#d73027", 
    "#f46d43", 
    "#fdae61", 
    "#fee090", 
    "#ffffbf", 
    "#ffffff", 
    "#e0f3f8", 
    "#abd9e9", 
    "#74add1", 
    "#4575b4", 
    "#4575b4", 
    "#d8daeb", 
    "#b2abd2", 
    "#8073ac", 
    "#542788", 
    "#000000" 
]; 


data = jsonArr; 

var width = 300, 
    height = 300, 
    radius = Math.min(width, height)/2; 

var color = d3.scale.ordinal() 
    .range(colorrange); 

var arc = d3.svg.arc() 
    .outerRadius(radius - 10) 
    .innerRadius(radius - 70); 

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

var svg = d3.select("#info").attr("align", "center").append("svg") 
    .attr("class", "piechart") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var g = svg.selectAll(".arc") 
    .data(pie(data)) 
    .enter().append("g") 
    .attr("class", "arc"); 

g.append("path") 
    .attr("d", arc) 
    .style("fill", function(d, i) { 
    return color(i); 
    }); 

g.append("text") 
    .attr("transform", function(d) { 
    return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d) { 
    return d.label; 
    });

來源

2016-01-11 pceccon

您需要返回第122行的d.data.label。該標籤位於數據對象下。

g.append("text") 
    .attr("transform", function(d) { 
    return "translate(" + arc.centroid(d) + ")"; 
    }) 
    .attr("dy", ".35em") 
    .text(function(d) { 
     return d.data.label; 
    });

https://jsfiddle.net/ermineia/g6vyk7t1/1/

來源

2016-01-11 20:00:56

也就是說佈局是如何工作的。您提供所需的數據，然後提供訪問器函數以從數據中提取該值：function（d）{return d.label;}但是，當您訪問由佈局構建的節點內容時，值爲弧特定數據和您的數據被封裝在該對象的數據屬性中（您的標籤恰好位於此處）。 –

無法想象在圓環圖標籤 - D3

回答

相關問題