Question

这是geojson文件

     {
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "properties": {
            "profit": 326,
            "npa": 174.000000
        }
    }, {
        "type": "Feature",
        "properties": {
            "profit": 1762,
            "npa": 1683.000000
        }
    }]
}

我想从geojson代码中绘制一个饼图。我希望饼图基于价值＆＃34;利润＆＃34;。提前致谢

我尝试点击这里的小提琴链接 - https://jsfiddle.net/venkatkiranpolamuri/92hn5bfb/

Answer 1

这里的关键是要了解如何使用d3从嵌套的JSON结构中检索数据。

最简单的方法是使用浏览器的控制台（Chrome中的F12）并打印出您尝试访问的数据。您尝试为饼图布局设置value的位置

return d.profit

但是，通过添加console.log(d.profit)行，您可以看到这是一个未定义的值。

实际上profit嵌套在properties级别，您需要先进入此级别：

.value(function (d) {
    console.log(d)
    // Changed the next line from d.profit
    return d.properties.profit;
}

同样，当value设置圆弧颜色和文本值时，您应该使用：

d.value

而不是

d.data.profit

从pie(data)结构返回所需的值。

这是一个工作小提琴：https://jsfiddle.net/henbox/ed3tukwx/1/

从d3中的json数据绘制饼图

1 个答案: