CODEWITHSUNDEEP
d3.jsnvd3.js
Rob Paddock
Rob Paddock

Reputation: 1003

Fill the inside of a pie donut chart d3

Example I am trying to create the image above using d3

http://jsfiddle.net/Spwizard/LBzx7/1/

var dataset = {
hddrives: [20301672, 9408258, 2147483, 21474836, 35622,32210000],
};

var width = 460,
height = 300,
radius = Math.min(width, height) / 2;

var color = d3.scale.ordinal()
.range(["#2DA7E2"]);

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 + ")");

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", ".35em")
  .style("text-anchor", "middle")
  .attr("class", "inside")
  .text(function(d) { return '56%'; });
svg.append("text")
   .attr("dy", "2em")
  .style("text-anchor", "middle")
  .attr("class", "data")
  .text(function(d) { return 'some text'; });

Im struggling to see how to deal with the background color of the inner circle and dealing with the space left for storage

Thanks

Upvotes: 2

Views: 8992

Answers (2)

ThangDV
ThangDV

Reputation: 1

Just append text:

svg.append("text")
  .attr("text-anchor", "middle")
  .attr('font-size', '20px')
  .attr('y', '5')
  .text(dataset.hddrives + "%");

Upvotes: 0

Lars Kotthoff
Lars Kotthoff

Reputation: 109282

To get a "background", you can add another circle with the respective fill colour. To deal with the free space, you can selectively set the opacity of one of the segments to 0. In your example, I've done that for the last slice:

.style("opacity", function(d, i) { return i == dataset.hddrives.length - 1 ? 0 : 1; })

Complete example (provided by OP) here.

Upvotes: 2

Related Questions