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