score:1

Accepted answer

i would have done it by following steps.

  • create a key value map for your data array first.(you can dynamically generate it from the data array if key value names has a regular pattern)

    var keymap = [{ category: 'producttype', value: 'value' }, { category: 'processtype', value: 'errorcount' }, { category: 'message', value: 'count' }];

  • convert the existing data in array of objects format to and array of arrays format.

    var formatteddata = d3.nest() .key(function(d) { return object.keys(d)[0]; }) .entries(data) .map(function(d){ return d.values });

  • once a key map is created, you can iterate over the data array and create charts as shown in below snippet.

  • calculate the chart positions as per the requirement inside the loop and place svg accordingly.

here is a sample code snippet.

var width = 300,
  height = 155,
  radius = math.min(width, height) / 3;

var keymap = [{
  category: 'producttype1',
  value: 'value1'
}, {
  category: 'producttype',
  value: 'value'
}, {
  category: 'producttype2',
  value: 'value2'
}];

var data =[
    {"producttype1":"999999","value1":"99"},
    {"producttype1":"88888","value1":"88"},
    {"producttype1":"77777","value1":"77"},
    {"producttype1":"999999","value1":"99"},
    {"producttype":"132023","value":"144"},
    {"producttype":"132030","value":"275"},
    {"producttype":"132053","value":"42"},
    {"producttype":"132093","value":"1"},
    {"producttype":"132197","value":"94"},
    {"producttype2":"132207","value2":"23"},
    {"producttype2":"304055","value2":"51"},
    {"producttype2":"520002","value2":"27"},
    {"producttype2":"522275","value2":"34"}
];

var formatteddata = d3.nest()
.key(function(d) { return object.keys(d)[0]; })
.entries(data).map(function(d){ return d.values });

formatteddata.foreach(function(piedata, i) {

  var color = d3.scale.category10();

  var arc = d3.svg.arc()
    .outerradius(radius - 10)
    .innerradius(0);

  var labelarc = d3.svg.arc()
    .outerradius(radius - 40)
    .innerradius(radius - 40);

  var svg = d3.select("body")
    .append("div")    
    .attr("width",width)
    .attr("height",height)
    .append("svg")
    .attr("width", "100%")
    .attr("height", "100%")
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) {
      console.log(keymap[i].value, d);
      return d[keymap[i].value];
    });

  var g = svg.selectall(".arc")
    .data(pie(piedata))
    .enter().append("g")
    .attr("class", "arc");

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d, j) {
      return color(j);
    });

  g.append("text")
    .attr("transform", function(d) {
      return "translate(" + labelarc.centroid(d) + ")";
    })
    .attr("dy", ".35em")
    .text(function(d) {    
      return d.data[keymap[i].category];
    });

  function type(d) {
    d[keymap[i].value] = +d[keymap[i].value];
    return d;
  }
});
.arc text {
  font: 10px sans-serif;
  text-anchor: middle;
}
.arc path {
  stroke: #fff;
}
div{
  float:left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>


Related Query

More Query from same tag