Reputation:
I'm trying to fill the middle of donut chart by adding a new circle to svg. The circle should be white and covering the horizontal lines in background but instead I've achieved a transparent circle in the middle of donut chart.
Here is my code so far and 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");
Upvotes: 1
Views: 1005
Reputation: 5372
This should do the trick:
svg.append("svg:circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20)
.style("fill", "white")
.append("g");
Alternatively a better approach is to do something like this:
svg.append("svg:circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 20)
.attr("class", "white-circle")
.append("g");
Then, in CSS:
.white-circle {
fill: #FFF;
}
Upvotes: 2