D3 - pasta grafikler

Ben birçok yol denedim ama böyle bir veriye sahip nerede d3 içinde pasta grafikler çizemezdi:D3 - pasta grafikler

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

Bu veriler neredeyse 55.000 satır ve her gruba 19 farklı değere sahiptir. Her grup "{" ile başlar ve "}" ile biter. İstediğim kod, verileri dinamik olarak okumak için pasta grafiklerini çizmelidir. 2

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

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

herhangi bir fikir denemek?

kaynak

2016-03-29 D. Ister

kodunuzu paylaşın:

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

Biraz çalışma kodu ile birlikte bu iki fikir koyalım: Bu seçim İçinde her yay ve etiket için g unsurdur . [Minimal, Tam ve Doğrulanabilir bir örnek nasıl oluşturulur?] 'U okumalısınız. (Http://stackoverflow.com/help/mcve) –

@MehdiElFadil Bu bölüm hakkındaki tüm kodları yok ettim. Ben çalışmayan bir şey paylaşmak istemedim –

@ D.Ister aslında o değil düzeltmek için en iyi ipuçları işe yaramazsa kodu içinde –

İşte hızlı bir örnek. Bazı nispeten gelişmiş d3 kavramlarına değiniyor, bu yüzden açıklamaya çalışacağım.

İlk olarak, verilerinizi düşünelim. d3, s nesnesinin dizileriyle ilgilenmeyi sever. Tekil bir nesne diziniz var. Yani bazı veri dönüşümü yapalım. Şu ana kadar:

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

Ama ne ihtiyaç vardır:

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

Neyse ki d3 bunun için neredeyse yerleşik işlevi, d3.entries sahiptir.

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

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

İkinci olarak, dış dizinizin bir grafik olduğu ve iç dizinizin dilimlerinizin olduğu birden çok pasta grafik yapmak istiyorsunuz. Bu, nested selection'u kullanmak için harika bir yerdir. Dış seçim, her bir pasta grafik için bir g öğesidir.

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

kaynak

2016-03-29 23:57:06 Mark

Mükemmel bir açıklama! Çok teşekkür ederim! Bunu şimdi deneyeceğim ve sonucu bilmeni istiyorum! –

D3 - pasta grafikler

cevap

İlgili konular