如何在甜甜圈图表中添加圆圈并将其填充到d3 js中？

Question

我试图通过向svg添加一个新圆来填充圆环图的中间。圆圈应该是白色的，并覆盖背景中的水平线条，但是我在圆环图中间实现了一个透明圆圈。
这是到目前为止我的代码和IMG enter image description here：

var width = 650, 
    height = 500, 
    outerRadius = 100, 
    innerRadius = outerRadius - 80; 

var arc = d3.svg.arc() 
    .outerRadius(outerRadius) 
    .innerRadius(innerRadius); 

var arcOver = d3.svg.arc() 
    .innerRadius(innerRadius) 
    .outerRadius(outerRadius + 5); 

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

// Define the div for the tooltip 
var div = d3.select("body").append("div") 
    .attr("class", "tooltip") 
    .style("opacity", 0); 

var svg = d3.select('.chart-container').append("svg") 
    .attr("width", width) 
    .attr("height", height) 
    .append("g") 
    .attr("transform", "translate(325,250)"); 

svg.append("svg:circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 20) 
    .append("g"); 

Answer 1

这应该做的伎俩：

svg.append("svg:circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 20) 
    .style("fill", "white") 
    .append("g"); 

或者更好的办法是做这样的事情：

svg.append("svg:circle") 
    .attr("cx", 0) 
    .attr("cy", 0) 
    .attr("r", 20) 
    .attr("class", "white-circle") 
    .append("g"); 

然后，在CSS中：

.white-circle { 
    fill: #FFF; 
}