D3 - Tortendiagramme

Ich habe viele Wege versucht, aber ich konnte nicht Tortendiagramme in d3 ziehen, wo ich ein Daten wie habe:D3 - Tortendiagramme

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

Diese Daten sind fast 55.000 Zeilen und jede Gruppe hat 19 verschiedenen Wert. Jede Gruppe beginnt mit "{" und endet mit "}". Der Code, den ich möchte, sollte Kreisdiagramm dynamisch vom Lesen der Daten zeichnen.

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 
*/

2. versuchen

//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; 
    });

Jede Idee?

Quelle

2016-03-29 D. Ister

Bitte teilen Sie Ihr Code:

// 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");

die diese beiden Ideen zusammen mit einigen Arbeits Code Lassen Sie setzen . Sie sollten lesen [Wie man ein minimales, komplettes und überprüfbares Beispiel erstellt] (http://stackoverflow.com/help/mcve) –

@MehdiElFadil Ich habe meinen ganzen Code über diesen Teil zerstört. Ich wollte nicht etwas teilen, das nicht funktioniert –

@ D.Ister tatsächlich ist es innerhalb des Codes, der nicht funktioniert, dass die besten Hinweise, wie man es beheben kann gefunden werden –

Hier ist ein kurzes Beispiel. Es berührt einige relativ fortgeschrittene d3-Konzepte, also werde ich versuchen zu erklären.

Lassen Sie uns zuerst über Ihre Daten nachdenken. d3 behandelt gerne Arrays von Objekten s. Sie haben ein Array von einzelnen Objekten. Also lass uns Daten konvertieren. Sie haben:

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

Aber was Sie brauchen, ist:

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

Zum Glück d3 hat eine fast eingebaute Funktion für diese, d3.entries.

Zweitens möchten Sie mehrere Kreisdiagramme erstellen, bei denen Ihre äußere Anordnung eine Tabelle und Ihre innere Anordnung Ihre Segmente ist. Dies ist ein großartiger Ort, um eine nested selection zu verwenden. Die äußere Auswahl ist ein g Element für jedes Kreisdiagramm. Innerhalb dieser Auswahl ist das g Element für jeden Bogen und Label:

<!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>

Quelle

2016-03-29 23:57:06 Mark

Eine perfekte Erklärung! Ich danke dir sehr! Ich werde es jetzt versuchen und Ihnen das Ergebnis mitteilen! –

D3 - Tortendiagramme

Antwort

Verwandte Themen