Question

我的目标

我想创建一个结合了等值区域图和符号图的地图。因此，我想在地图上放置几个饼图。

我的问题 我已经基于this tutorial创建了等值区域图。现在，我想使用以下格式的csv用饼图替换示例中的大小点：

Region，Group1，Group2，Group3，Group4，lat，lon

在查看几个线程后，特别是在this one，我的函数看起来像这样：

                d3.csv("Bevoelkerung-Altersstruktur-2010-lat.csv", function drawPies (data) {

                var radius = d3.scale.sqrt()
                .domain([1, d3.max(csv, function(d) { 
                    return d.Total; 
                })])
                .range([2, 25]);

               var color = d3.scale.ordinal();

               var arc = d3.svg.arc().innerRadius(0).outerRadius(20)
               pie = d3.layout.pie()
               .value(function(d){ return d });

                var pie = d3.layout.pie();

                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] + ")";
                    });

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

                });

不幸的是，这根本没有任何作用，我只能看到等值线图。有没有人能解决我的问题？

Answer 1

一般来说，你的代码看起来还不错，但我想知道几件事：

1。）你的CSV文件头是否真的有空格？当d3解析它时，你最终会得到带空格的属性名称。

2。）您是否将数据强制转换为数字？我没有看到任何转换，它将作为字符串从csv出来：

d3.csv("Bevoelkerung-Altersstruktur-2010-lat.csv", 
  function(d) { 
    return {
      Group1: +d.Group1, 
      Group2: +d.Group2, 
      Group3: +d.Group3,  
      Group4: +d.Group4, 
      lat: +d.lat, 
      lon: +d.lon
    }; 
  }, function drawPies (data) {
  ...
});

无论如何，这是quick bl.ock.org example，基于this添加饼图。

将饼图放在地图上

1 个答案: