大小饼图

Question

我在地图上放置了几个饼图，并希望根据 csv 文件中的相应值（在本例中为“总计”）调整它们的大小。但是无论我如何调整半径，馅饼都不会显示。我错过了什么重要的事情吗？

到目前为止我的代码：

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 是完整代码的链接。

Answer 1

我无法以正确的方式运行您的代码，因此我移动了一些东西以使其在 plnkr 下运行。

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

重要的部分在这里：

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