填寫餅圖圓環圖D3

圖像內http://jsfiddle.net/Spwizard/LBzx7/1/

var dataset = { 
hddrives: [20301672, 9408258, 2147483, 21474836, 35622,32210000], 
}; 

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

var color = d3.scale.ordinal() 
.range(["#2DA7E2"]); 

var pie = d3.layout.pie() 
.sort(null); 

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

var svg = d3.select("body").append("svg") 
.attr("width", width) 
.attr("height", height) 
.append("g") 
.attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

var path = svg.selectAll("path") 
.data(pie(dataset.hddrives)) 
    .enter().append("path") 
.attr("class", "arc") 
.attr("fill", function(d, i) { return color(i); }) 
.attr("d", arc); 
svg.append("text") 
    .attr("dy", ".35em") 
    .style("text-anchor", "middle") 
    .attr("class", "inside") 
    .text(function(d) { return '56%'; }); 
svg.append("text") 
    .attr("dy", "2em") 
    .style("text-anchor", "middle") 
    .attr("class", "data") 
    .text(function(d) { return 'some text'; });

進出口掙扎來看看如何應對內的背景顏色圈和處理留下的存儲空間

感謝

來源

2014-02-13 Rob Paddock

對於前者，您可以追加一個單獨的'circle'並相應地填充它。對於後者，您需要一個虛擬元素來表示您不知道繪製的可用空間。 –

謝謝我已經更新了小提琴來排序背景，只是不知道如何處理自由空間 –

像[this]（http://jsfiddle.net/LBzx7/2/）這樣的設置不透明度的基礎在屬性上。 –

爲了得到一個「後臺」，你可以用相應的填充顏色添加另一個圓。爲了應對自由空間，你可以選擇性地設置段爲0。在您的例子之一的透明度，我已經做了，在過去的切片：

.style("opacity", function(d, i) { return i == dataset.hddrives.length - 1 ? 0 : 1; })

完整的示例（由OP提供）here 。

來源

2014-02-13 17:30:21

填寫餅圖圓環圖D3

回答

相關問題