创建多个饼图/甜甜圈图

Question

Here's the fiddle i've been working on.

I'm trying to figure out how to adjust this code so I can make multiple instances of my donut chart — scaled to various sizes depending upon the size of each object's "toursCreated" (but that's secondary).

Right now I am just trying to understand how making multiples work — what are the code adjustments I need to make so I generate a pie chart for each object of data stored in the array of data.

here's the code so far...

 var width = 200, height = 150, radius = Math.min(width, height) / 2; var percentageFormat = d3.format("%"); var color = d3.scale.ordinal() .range(["#98abc5", "#8a89a6"]); var arc = d3.svg.arc() .outerRadius(radius) .innerRadius(40); var labelArc = d3.svg.arc() .outerRadius(radius - 18) .innerRadius(radius - 18); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.region; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); function render (data) { var tots = d3.sum(data, function(d) { console.log(d.region); return d.region; }); data.forEach(function(d) { d.percentage = d.region / tots; console.log(d.percentage); }); var g = svg.selectAll(".arc") .data(pie(data)) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.region); }); g.append("text") .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) .attr("dy", ".35em") .text(function(d) { return percentageFormat(d.data.percentage); }); console.log(data); var middle = data; console.log(middle); var innerG = svg.append("g") .attr("class", "innerArc") .append("circle") .attr("r", 40) .style("fill", "grey"); var salesPeopleTotal = svg.append("g") .attr("class", "sumTotal-text") .selectAll("text") .data([middle[0]]) .enter().append("text") .text(tots) .attr('y', "5") .attr('x', "-10") .style("fill", "white"); } var salesPeople = [ { "region": "West", "toursCreated": 644, "totalStaff": 644, "activeStaff": 399, "inactiveStaff": 245 }, { "region": "North-West", "toursCreated": 467, "totalStaff": 644, "activeStaff": 399, "inactiveStaff": 245 }, { "region": "South-West", "toursCreated": 320, "totalStaff": 644, "activeStaff": 399, "inactiveStaff": 245 } ]; var inactive = {"name": "inactive"}; inactive.region = salesPeople[0].inactiveStaff; var active = {"name": "active"}; active.region = salesPeople[0].activeStaff; var myArray = []; myArray.push(inactive); myArray.push(active); render(myArray); 

Answer 1

Maybe hold the d3 logic in a class, then create chart objects with the new operator.

Ref:
http://www.w3schools.com/js/js_object_prototypes.asp

//if you use the new operator on a function, you get an object.
//var chartObj = new Chart({selector: '#myChartHtmlId svg', data: {}});
function Chart(initObject) {
  //set Chart properties.
  this.width = 200;
  this.height = 200;
  this.selector = initObject.selector;
  this.d3svg = d3.select(this.selector);
  this.data = initObj.data;

  for (prop in initObject) {
    //to overwrite defaults use:
    //new Chart({width: 500, height: 500});
    this[prop] = initObject[prop];
  }
  this.render();
}

//now once you've used:
//var chartObj = new Chart();
//you can now:
//chartObj.updateData(someVarWithData);
Chart.prototype.updateData = function(data) {
  this.data = data;
  this.render();
};

Chart.prototype.render = function() {
  var svg = this.d3sv;
  //continue d3 stuff.
  //access the object data with this.data
};

html:
....in the body obviously..

<svg id="myChartHtmlId"></svg>

Then use:

var charts = [];

for (var i = 0, j = arrayOfChartInitObjects.length; i < j; i++) {
  var chartInitObj = arrayOfChartInitObjects[i];
  charts.push(new Chart(chartInitObj));
}

Please comment on my answer if any of this doesn't make sense/ you need further explanation.

I hope this helps.

Rhys