D3 dougnut chart customizing circle color - d3.js

Question

Im making a graph that fills the circle by the percentage of the number of a certain product by the total of products avaible im almost close to what i need only problem is i cant figure it out how to change the left-over part of the donut arc.
this is the code
http://jsfiddle.net/LBzx7/345/
I can change the color the circle of the % of the product on this line
.attr("fill", "#F1F1F1");
, but what is left is the same color of the page background, i need to be able to change the color of that. Any ideas?

Answer 1

Here's a code snippet with the requirement fulfilled.
var dataset = {
hddrives: [90,10],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#2DA7E2", "red"]);
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 70);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
//Draw the Circle
svg.append("circle")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", 65)
.attr("fill", "#F1F1F1");
var path = svg.selectAll("path")
.data(pie(dataset.hddrives))
.enter().append("path")
.attr("class", "arc")
.attr("fill", function(d, i) { return color(i); })
.attr("d", arc);
svg.append("text")
.attr("dy", "0em")
.style("text-anchor", "middle")
.attr("class", "inside")
.text(function(d) { return '56%'; });
svg.append("text")
.attr("dy", "1.5em")
.style("text-anchor", "middle")
.attr("class", "data")
.text(function(d) { return '53GB / 123GB'; });
.inside {
font-family: 'Roboto Condensed', sans-serif;
font-size:30px;
}
.data {
font-size:12px;
color:grey;
}
.arc {
stroke: #fff;
}
.
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.3.7/d3.min.js"></script>
Code changes:
Changed the color scale's range to .range(["#2DA7E2", "red"]);
With this, .attr("fill", function(d, i) { return color(i); }) will find appropriate color based on i. (as it was just one color before, the color was being repeated).
Got rid the opacity of the arcs i.e. removed the following line
(as this was causing the "left-over" part to have an opacity of 0)
.style("opacity", function(d, i) { return i == dataset.hddrives.length - 1 ? 0 : 1; })
Hope this helps. :)