d3.js - 使用 d3.js 在 map 点上绘制饼图

Question

我想为 map 上的每个点而不是一个圆圈绘制一个饼图。
map 和点显示良好，但饼图未显示在 map 点上方。也没有错误。我也可以在 map 中看到添加的饼图代码。

下面是代码片段。

var w = 600;
var h = 600;
var bounds = [[78,30], [87, 8]];  // rough extents of India
var proj = d3.geo.mercator()
        .scale(800)
        .translate([w/2,h/2])
        .rotate([(bounds[0][0] + bounds[1][0]) / -2,
            (bounds[0][1] + bounds[1][1]) / -2]); // rotate the project to bring India into view.

var path = d3.geo.path().projection(proj);

var map = d3.select("#chart").append("svg:svg")
        .attr("width", w)
        .attr("height", h);

var india = map.append("svg:g")
        .attr("id", "india");

var gDataPoints = map.append("g"); // appended second
d3.json("data/states.json", function(json) {
    india.selectAll("path")
            .data(json.features)
            .enter().append("path")
            .attr("d", path);

});

d3.csv("data/water.csv", function(csv) {
    console.log(JSON.stringify(csv))
    gDataPoints.selectAll("circle")
            .data(csv)
            .enter()
            .append("circle")
            .attr("id", function (d,i) {
                return "chart"+i;
            })
            .attr("cx", function (d) {
                return proj([d.lon, d.lat])[0];
            })
            .attr("cy", function (d) {
                return proj([d.lon, d.lat])[1];
            })
            .attr("r", function (d) {
                return 3;
            })
            .each(function (d,i) {
                barchart("chart"+i);
            })
            .style("fill", "red")
            //.style("opacity", 1);
});


function barchart(id){

    var data=[15,30,35,20];      
    var radius=30;
    var color=d3.scale.category10()        

    var svg1=d3.select("#"+id)
            .append("svg").attr('width',100).attr('height',100);

    var group=svg1.append('g').attr("transform","translate(" + radius + "," + radius + ")");
    var arc=d3.svg.arc()
            .innerRadius('0')
            .outerRadius(radius);
    var pie=d3.layout.pie()
            .value(function(d){
                return d;
            });

    var arcs=group.selectAll(".arc")
            .data(pie(data))
            .enter()
            .append('g')
            .attr('class','arc')

    arcs.append('path')
            .attr('d',arc)
            .attr("fill",function(d,i){
                return color(d.data);
                //return colors[i]
            });
}

水.csv:

lon,lat,quality,complaints
80.06,20.07,4,17
72.822,18.968,2,62
77.216,28.613,5,49
92.79,87.208,4,3
87.208,21.813,1,12
77.589,12.987,2,54
16.320,75.724,4,7

Answer 1

在测试您的代码时，我根本看不到饼图的渲染。但是，我相信我仍然可以为您提供解决方案。

您不需要单独的饼图函数来调用每个点。我确信对此有不同的看法，但关于 Stack Overflow 的 d3 问题通常会调用额外的函数，这些函数会延长代码，同时未充分利用 d3 的优势和内置功能。

为什么在这种情况下我会有这种感觉？很难保留绑定(bind)到 svg 对象的数据和饼图函数之间的链接，这就是为什么必须将点的 id 传递给函数的原因。如果您想在 csv 本身中包含饼图数据，这将更加复杂。

使用 d3 的数据绑定(bind)和选择，您可以使用更简单的代码完成所需的一切。我花了一些时间来掌握如何做到这一点，但是一旦你掌握了它，它确实会让生活变得更轻松。

注意:我很抱歉，我将您发布的代码移植到 d3v4，但我已经包含了指向下面 d3v3 代码以及 d3v4 的链接，尽管在片段中唯一明显的变化可能是从 color(i) 到颜色[i]

在这种情况下，而不是调用函数将饼图附加到每个 circle带有 selection.each() 的元素，我们可以附加一个 g元素，然后将元素直接附加到每个 g与选择。

此外，为了让生活更轻松，如果我们最初附加每个 g带有变换的元素，我们可以使用相对测量将项目放置在每个 g ，而不是找出我们需要的绝对 svg 坐标。

 d3.csv("water.csv", function(error, water) {

    // Append one g element for each row in the csv and bind data to it:
var points = gDataPoints.selectAll("g")
    .data(water)
    .enter()
    .append("g")
    .attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" })
    .attr("id", function (d,i) { return "chart"+i; })
    .append("g").attr("class","pies");

// Add a circle to it if needed
points.append("circle")
    .attr("r", 3)
    .style("fill", "red");

// Select each g element we created, and fill it with pie chart:
var pies = points.selectAll(".pies")
    .data(pie([0,15,30,35,20]))
    .enter()
    .append('g')
    .attr('class','arc');

pies.append("path")
  .attr('d',arc)
  .attr("fill",function(d,i){
       return color[i];      
      });
});  

现在，如果我们想为每个饼图显示来自 csv 的数据，并可能添加一个标签。现在很容易做到这一点。在 csv 中，如果有一列标记为 data , 值用破折号分隔，列名 label ，我们可以很容易地调整我们的代码来显示这个新数据:

d3.csv("water.csv", function(error, water) {

    var points = gDataPoints.selectAll("g")
        .data(water)
        .enter()
        .append("g")
        .attr("transform",function(d) { return "translate("+projection([d.lon,d.lat])+")" })
        .attr("class","pies")

    points.append("text")
        .attr("y", -radius - 5)
        .text(function(d) { return d.label })
        .style('text-anchor','middle');

    var pies = points.selectAll(".pies")
        .data(function(d) { return pie(d.data.split(['-'])); })
        .enter()
        .append('g')
        .attr('class','arc');

    pies.append("path")
      .attr('d',arc)
      .attr("fill",function(d,i){
           return color[i];     
      });

});

我们要显示的数据已经绑定(bind)到初始 g我们为 csv 中的每一行创建的。现在我们要做的就是附加我们想要显示的元素并选择我们想要显示的绑定(bind)数据的属性。

这种情况下的结果如下所示:



我在 v3 和 v4 中发布了示例，以展示遵循上述饼图方法的潜在实现:

如示例中的所有饼图使用一个静态数据数组: v4和 v3

并通过从 csv 中提取数据来显示: v4和 v3