Große Kreisdiagramme

Question

Ich habe mehrere Kreisdiagramme auf einer Karte platziert und möchte ihre Größe basierend auf einem entsprechenden Wert aus einer CSV-Datei ("Total", in diesem Beispiel) anpassen. Aber egal wie ich den Radius einstelle, die Torten werden nicht angezeigt. Gibt es etwas wichtiges, das ich vermisst habe?

Mein Code so weit:

d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function drawPies (data) { 
var pie = d3.layout.pie() 
.sort(null) 
.value(function(d) { return +d}); 

var arc = d3.svg.arc() 
.innerRadius(0) 
.outerRadius(function(d) { 
    return d.Total; });  


var pies = svg.selectAll('.pie') 
.data(data) 
.enter() 
.append('g') 
.attr('class', 'pie') 
.attr("transform", function(d) { 
    return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")"; 
}); 

var color = d3.scale.ordinal() 
     .range(["#98abc5", "#7b6888", "#a05d56", "#d0743c",]) 
     .domain(d3.range(0,4)); 

pies.selectAll('.slice') 
.data(function(d){ 
return pie([d.Group1, d.Group2, d.Group3, d.Group4]); }) 
.enter() 
.append('path') 
.attr('d', arc) 
.style('fill', function(d,i){ 
    return color(i); 
}); 

Here ist der Link zum vollständigen Code.

Answer 1

Ich konnte Ihren Code nicht richtig laufen lassen, also habe ich ein paar Dinge bewegt, damit es unter einem PLNKR funktioniert.

// You had all the async calls to remote data files nested which I 
// recommend not doing. I separated your GeoJSON rendering and your 
// pie rendering into two distinct functions. 

// Start GeoJSON rendering 
d3.csv("Jugendarbeitslosigkeit.csv", function(data) { 
    //Load in GeoJSON data 
    d3.json("PolenReg2.json", function(json) { 
    data.forEach(function(d, i) { 
    // ...more code 
    // This is a tricky part 
    // Since we separated the polygon and pie rendering 
    // and the polygon calls will take longer due to size 
    // the group containing the polygons will be rendered 
    // last, thus rendering the group after your pie group. 
    // This will make your pies stay behind the polygon paths 
    // that's why we use the insert. In order to position 
    // the polygons layer below the pies. 
    svg 
    .insert('g', ':first-child') 
    // ... more code 
// End GeoJSON rendering 

// Start Pie rendering 
d3.csv("Bevoelkerung-Altersstruktur-2010-Summe.csv", function(err, data) { 
    // Set our large pie function 
    var pie = d3.layout.pie() 
    .sort(null) 
    .value(function(d) { 
     return +d.key; 
    }); 
    // ... more code 
// End Pie rendering 

Der wichtigste Teil ist hier:

var pies = svg 
    .append('g') // Add a group with the class 'big-pies' 
    .attr('class', 'big-pies') 
    .selectAll('.pie') // Join data to create groups by each polygon (as far as I understand) 
    .data(data) 
    .enter() 
    .append('g') 
    .attr('class', 'pie') 
    .attr("transform", function(d) { 
     var proj = projection([d.lon, d.lat]); 
     return "translate(" + proj[0] + "," + proj[1] + ")"; 
    }) 
    .selectAll('.slice') // Start pie - data join 
    .data(function(d) { 
     // set slice data with additional total value 
     // so that we can use this value at the attr d 
     // function 
     return pie([{ 
     key: d.Kinder, 
     tot: d.total 
     }, { 
     key: d.Jugendliche, 
     tot: d.total 
     }, { 
     key: d.Erwachsene, 
     tot: d.total 
     }, { 
     key: d.Rentner, 
     tot: d.total 
     }]); 
    }) 
    .enter() 
    .append('path') 
    .attr('d', function(d, i) { 
     // return the arc function with outer radius increased by the total value 
     return d3.svg.arc().innerRadius(0).outerRadius(d.data.tot * 2).call(d, d) 
    }) 
    .style('fill', function(d, i) { 
     return c10(i); 
    }); 

Plnkr: https://plnkr.co/edit/CwiFnNmfIleo5zZ6BseW?p=preview