d3.js - 填充饼图圆环图 d3 的内部

Question

我正在尝试使用 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'; });

我正在努力了解如何处理内圈的背景颜色以及处理剩余的存储空间

谢谢

Answer 1

要获得“背景”，您可以添加另一个具有相应填充颜色的圆圈。为了处理可用空间，您可以有选择地将其中一个片段的不透明度设置为 0。在您的示例中，我对最后一个切片执行了此操作:

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

完整示例(OP提供)here .