D3弧分区可视化与部分填充

Question

我试图创建一个与森伯斯特有些相似的可视化效果。它基本上是一个饼图，每个分区均匀分割，数据代表分区的填充百分比。以下是我目前使用以下代码的内容......

应从内半径部分填充每个分区，并填充切片的百分比。有什么想法吗？

var width = 600,
  height = 600,
  radius = Math.min(width, height) / 2,
  color = d3.scale.category20c();

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

var partition = d3.layout.partition()
  .sort(null)
  .size([2 * Math.PI, radius * radius])
  .value(function(d) { return 1; });

var arc = d3.svg.arc()
  .startAngle(function(d) { return d.x; })
  .endAngle(function(d) { return d.x + d.dx; })
  .innerRadius(function(d) { console.log("INNER: ", d.y); return 0; })
  .outerRadius(function(d) { console.log("OUTER: ", d.y, d.dy); return Math.sqrt(d.y + d.dy); });



d3.json("data.json", function(error, root) {
  if (error) throw error;

  var path = svg.datum(root).selectAll("path")
    .data(partition.nodes)
    .enter().append("path")
    .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
    .attr("d", arc)
    .style("stroke", "#fff")
    .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
    .style("fill-rule", "evenodd");

});


d3.select(self.frameElement).style("height", height + "px");