score:1

Accepted answer

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:

  1. 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).

  2. 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. :)


Related Query

More Query from same tag