CODEWITHSUNDEEP
javascriptd3.js
lolio
lolio

Reputation: 333

Creating multiple progress circles d3.js

I'm looking to create multiple progress circles. (So, draw 3 circles from one data set)

I've been trying to adapt from this example, but as you will see, I've gone seriously wrong somewhere.

First steps I took was to change all the datums to data, as I will want the option to handle the data dynamically. Then, I tried to simplify the code so it was clearer/easier for me to understand. (I'm a d3 newbie!)

And now, I'm not sure what's going on, and was hoping someone could help me get to the end result?

Here is a fiddle and my code;

/*global d3*/

var width = 240,
  height = 125,
  min = Math.min(width, height),
  oRadius = min / 2 * 0.8,
  iRadius = min / 2 * 0.85,
  color = d3.scale.category20();

var arc = d3.svg.arc()
  .outerRadius(oRadius)
  .innerRadius(iRadius);

var pie = d3.layout.pie().value(function(d) {
  return d;
}).sort(null);

var data = [
  [20],
  [40],
  [60]
];

// draw and append the container
var svg = d3.select("#chart").selectAll("svg")
  .data(data)
  .enter().append("svg")
  .attr("width", width).attr("height", height);
svg.append('g')
  .attr('transform', 'translate(75,62.5)')
  .append('text').attr('text-anchor', 'middle').text("asdasdasdas")


// enter data and draw pie chart
var path = svg.selectAll("path")
  .data(pie)
  .enter().append("path")
  .attr("class", "piechart")
  .attr("fill", function(d, i) {
    return color(i);
  })
  .attr("d", arc)
  .each(function(d) {
    this._current = d;
  })

function render() {
  // add transition to new path
  svg.selectAll("path")
  .data(pie)
  .transition()
  .duration(1000)
  .attrTween("d", arcTween)

  // add any new paths
  svg.selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("class", "piechart")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    })

  // remove data not being used
  svg.selectAll("path")
    .data(pie).exit().remove();
}

render();


function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

Thanks all!

Upvotes: 1

Views: 615

Answers (1)

thatOneGuy
thatOneGuy

Reputation: 10612

You have a problem with where you are drawing your separate charts. All you need to do is add a translate to each one so they are in the center of their containers.

Add this after you create the paths : 

.attr('transform', 'translate(' + width/2 + ',' +height/2 + ')')

width and height here are the containers dimensions, this will move each chart to the center of their container.

Update fiddle : http://jsfiddle.net/thatOneGuy/dbrehvtz/2/

Obviously, you probably know, if you want to add more values to each pie, just edit the data. For example : 

var data = [
  [20, 100, 100, 56, 23, 20, 100, 100, 56, 23 ],
  [40],
  [60]
];

New fiddle : http://jsfiddle.net/thatOneGuy/dbrehvtz/3/

Upvotes: 1

Related Questions