如何为本地 geojson 文件绘制 d3 条形图

Question

我正在尝试为以下本地存储在 myfile.geojson 中的 geojson 数据绘制条形图、饼图和气泡图。通过堆栈溢出，我知道了如何制作饼图。以此为参考，我正在尝试制作条形图。我试过了，但我不明白。这是geojson文件的代码。

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

我试过的代码在这个 plunker link

我是 d3 的新手。据我所知，我试过了。提前致谢

Answer 1

我没能完全解决，但有一些建议。希望它能有所帮助，其他人可以对此进行编辑或提供更好的答案。

d3.layout.stack() 没有函数 .sort 并且有 .values 而不是 .value
使用 d3.json
你有 .append(text) 并且应该是 .append("text")
如果您只是想创建条形图，那么我认为不需要堆栈布局

Answer 2

正如 Justin 所指出的，您在 plunker 上提供的代码中存在一些缺陷。除此之外，您没有正确使用 D3.js API。我建议通读它们，尤其是关于比例、轴和选择的内容。

您面临的另一个问题是，您需要将 geojson 数据转换为有用的平面数组格式 - 您应该检查两个函数 map（将列表映射到列表）和 reduce（将列表映射到值）。通过使用这两个函数（也是嵌套的），您可以轻松地从原始数据中创建漂亮的数据集。

最后，这是一个基于您的 plunker 和提供的代码片段的条形图的工作示例：http://plnkr.co/edit/eqJ7AkzWpHO4ZQENkXgy?p=preview

相关的数据处理部分发生在这里，我从您的 geojson 文件中提取数据数组和标签数组：

d3.json("myfile.geojson", function(res) {
  var data = res.features.map(function(d){
    return d.properties.profit;
  });
  var labels = res.features.map(function(d, i){
    return i;
    // return d.properties.nga;
  });

  barchart(500, 500, data, labels);
});

其余代码用于正确显示条形图和轴。此代码现在可以轻松替换为堆积面积图或饼图。

如何为本地 geojson 文件绘制 d3 条形图

how to draw a d3 bar chart for a local geojson file

charts

geojson

d3.js