D3-饼图

Question

I have tried many ways but I couldn't draw pie charts in d3 where I have a data like:

"something": [{
    "a":"some value",
    "b":"another value",
    .  
    .
    .
},{
    "c":"a value",
    "d":"value",
    .
    .
    .
}]

This data is almost 55,000 lines and each group has 19 different value. Each group starts with "{" and ends with "}". The code I want should draw pie charts dynamically of reading the data.

var width = 550;
var height = 350;
var radius = 300/ 2;
var color = d3.scale.category20b();  //builtin range of colors
var svg = d3.select('#pie_chart').append('svg')
                                 .attr('width', width)
                                 .attr('height', height)
                                 .append('g')
                                 .attr('transform', 'translate(' + (width / 2) +',' + (height / 2) + ')');
var total = 0;

for(var a=0;a<Data.length;a++){
total=total+parseInt(Data[a].count); // simple logic to calculate total of data count value
console.log(total);
}
var pie_data=[];
for( var a=0;a<Data.length;a++){ // simple logic to calculate percentage data for the pie
pie_data[a]=(Data[a].count/total)*100;
}
var arc = d3.svg.arc().outerRadius(radius);
// creating arc element.
var pie = d3.layout.pie()
.value(function(d,i) { return pie_data[i]; })
.sort(null);
//Given a list of values, it will create an arc data for us
//we must explicitly specify it to access the value of each element in our data array
var path = svg.selectAll('path')
.data(pie(Data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return Data[i].color;
});
//set the color for each slice to be chosen, from the color defined in sample_data.json
//this creates the actual SVG path using the associated data (pie) with the arc drawing function
*/

2nd try

//pie chart

var width = 300;
var height = 300;

  //each arc in the pie chart
  var outerRadius = width/2;
  var innerRadius = width/3;
  var arc = d3.svg.arc()
                  .innerRadius(innerRadius)
                  .outerRadius(outerRadius);

  //pie chart
  var pie = d3.layout.pie();
  //colors
  var color = d3.scale.category20();

  //Create SVG element
  var svg = d3.select("body")
              .append("svg")
              .attr("width", width)
              .attr("height", height);

//Set up groups
var arcs = svg.selectAll("g.arc")
              .data(pie(data))
              .enter()
              .append("g")
              .attr("class", "arc")
              .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

//Draw arc paths
arcs.append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc);

//Labels
arcs.append("text")
    .attr("transform", function(d) {
      return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor", "middle")
    .text(function(d) {
      return d.value;
    });

Any idea?

Answer 1

Here's a quick example. It touches on some relatively advanced d3 concepts, so I'll try to explain.

First, let's think about your data. d3 likes to deal with arrays of object s . You have an array of singular object. So let's do some data conversion. You have:

[{
  "a": 1,
  "b": 2,
  "c": 3  
}, {
  "d": 4,
  "e": 5
...

But what you need is:

[
  [{
    "key": "a", 
    "value": 1
   }, {
    "key": "b", 
    "value": 2
   }, {
    "key": "c", 
    "value": 3
   }
  ],[{
    "key": "d", 
    "value": 4
   }
   ....
  ]
]

Luckily d3 has an almost builtin function for this, d3.entries .

var data = [{
    "a": 1,
    "b": 2,
    "c": 3
},{
    "a": 4,
    "d": 5,
    "e": 6
}];

var fixedData = data.map(function(d){
  return d3.entries(d);
});

Second, you want to make multiple pie charts where your outer array is a chart and your inner array is your slices. This is great place to use a nested selection . The outer selection is a g element for each pie chart. Inside this selection is the g element for each arc and label:

// create a g for each pie chart
var p = svg.selectAll(".pie")
  .data(fixedData)
  .enter()
  .append("g")
  .attr("class", "pie")
  .attr("transform",function(d,i){
    return "translate(" + (width / 2) + "," + ((radius * i * 2) + radius) + ")"; //<-- place the g down the page
  });

// create an arc for each slice
var g = p.selectAll(".arc") //<-- this is a nested selection
  .data(function(d){
    return pie(d); //<-- d here is each element of the outer array
  })
  .enter().append("g")
  .attr("class", "arc");

---

Let's put these two ideas together with some working code:

 <!DOCTYPE html> <meta charset="utf-8"> <style> .arc text { font: 15px sans-serif; text-anchor: middle; } .arc path { stroke: #fff; } </style> <body> <script src="//d3js.org/d3.v3.min.js"></script> <script> var data = [{ "a": 1, "b": 2, "c": 3 },{ "a": 4, "d": 5, "e": 6 },{ "d": 4, "f": 5, "b": 6 }]; var fixedData = data.map(function(d){ return d3.entries(d); }); var width = 500, height = 500, radius = (Math.min(width, height) / 2) / data.length; var color = d3.scale.category10(); var arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0); var labelArc = d3.svg.arc() .outerRadius(radius / 2) .innerRadius(radius / 2); var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.value; }); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); var p = svg.selectAll(".pie") .data(fixedData) .enter() .append("g") .attr("class", "pie") .attr("transform",function(d,i){ return "translate(" + (width / 2) + "," + ((radius * i * 2) + radius) + ")"; }); var g = p.selectAll(".arc") .data(function(d){ return pie(d); }) .enter().append("g") .attr("class", "arc"); g.append("path") .attr("d", arc) .style("fill", function(d) { return color(d.data.key); }); g.append("text") .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) .text(function(d) { return d.data.key; }); </script>