javascript - 如何在 donut chart 中间加一个圆圈并在d3 js中填充？

Question

我试图通过向 svg 添加一个新圆来填充圆环图的中间。圆圈应该是白色的并覆盖背景中的水平线，但我在 donut chart 的中间实现了一个透明的圆圈。
到目前为止，这是我的代码和 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;
}