填写饼图圆环图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

回答

相关问题