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

Justin指出，你在plunker上提供的代码有一些缺陷。除此之外，您还没有正确使用D3.js API。我建议仔细阅读它们，特别是有关Scales，Axes和Selections的信息。

您面临的另一个问题是，您需要将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);
});

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

Answer 2

我无法完全解决一些建议。希望它有所帮助，其他人可以编辑或提供更好的答案。

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

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

2 个答案: