CODEWITHSUNDEEP
javascripthtmld3.jshtml5-canvas
user6699530
user6699530

Reputation:

How to add a circle in the middle of donut chart and fill it in d3 js?

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

Answers (1)

abigperson
abigperson

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

Related Questions