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

Question

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

4

我希望在地图上的每个点上绘制饼图，而不是圆圈。

地图和点都能正常显示，但饼图未显示在地图点上。没有错误提示。我可以在地图中看到添加的饼图代码。

以下是代码片段：

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

water.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

- Subham

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andrew Reid · Accepted Answer

在测试您的代码时，我无法看到饼图的渲染。但是，我相信我仍然有一个解决方案供您参考。

您不需要单独编写饼图函数来调用每个点。我相信对此有各种不同的意见，但是在Stack Overflow上，d3的问题通常会调用额外的函数，从而增加代码长度，同时未充分利用d3的强大功能和内置功能。

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

通过d3的数据绑定和选择，您可以使用更简单的代码完成所有所需操作。我花了一些时间才能掌握如何做到这一点，但是一旦掌握了它，生活就会变得更加轻松。

注意：我很抱歉，我将您发布的代码移植到了d3v4，但我已经包含了下面的d3v3代码链接以及d3v4，尽管在片段中唯一明显的更改可能是从color（i）更改为color [i]。

在这种情况下，我们可以使用选择器直接将元素附加到每个