【问题标题】：d3.js maps: using a geojson file AND CSV datad3.js 地图：使用 geojson 文件和 CSV 数据
【发布时间】：2020-07-19 20:33:35
【问题描述】：

我无法在 d3.js 中获取地图以响应 csv（或 tsv）中保存的数据。我正在使用 geojson 文件，并成功地显示了伊利诺伊州的县界。但是，地图不响应 tsv 文件中的数据。

我怀疑问题可能出在我将数据 - data() - 绑定到路径的位置。马克·博斯托克使用 .data(topojson.feature(us, us.objects.counties).features)，但这是基于我不完全理解的函数结构：function ready([us]) 我怀疑有问题的代码行是.data(values[0].features, values[population])

这是我的全部代码，它生成了一张伊利诺伊州县的地图，但没有其他内容。为了排除故障，我已将数据剥离为填充颜色。

我的 json 文件在这里：https://raw.githubusercontent.com/cyrusobrien/cyrusobrien/master/documents/illinois_ods.geojson，数据在这里：https://raw.githubusercontent.com/cyrusobrien/cyrusobrien/master/html/countytest.tsv

很抱歉没有在 jfiddle 上发帖，但是（我认为）我在那里遇到了域冲突问题。

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>My map</title>
    <script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
    <style></style>
</head>
<body>
<div id="container" class="svg-container"></div>
<script type="text/javascript">
    var w = 900;
    var h = 500;
    var svg = d3.select("div#container").append("svg").attr("preserveAspectRatio", "xMinYMin meet").style("background-color","#c9e8fd")
        .attr("viewBox", "0 0 " + w + " " + h)
        .classed("svg-content", true);

    // load data

    var population = d3.map();


    var promises = [
        d3.json("/documents/illinois_ods.geojson"),
        d3.tsv("/html/countytest.tsv", function(d) { population.set(d.NAME, +d.color); })];



    var projection = d3.geoMercator().translate([w/2, h/2]).scale(2900).center([-89.3985,40.6331]);
    var path = d3.geoPath().projection(projection);

//draw map
    Promise.all(promises).then(function(values){
        svg.selectAll("path")
            .data(values[0].features, values[population])
            .enter()
            .append("path")
            .attr("d", path)
            .attr("fill",function (d) {d.color = population.get(d.NAME); })
    });

</script>
</body>
</html>

如果相关，我会在本地机器上使用 webstorm 和 jekyll 运行它。

感谢您的帮助！

【问题讨论】：

标签： csv d3.js data-binding geojson

【解决方案1】：

加载数据

Promise.all() 返回一个已履行承诺的数组。要使用它们，您可以直接从 values 数组中访问它们。

一个方便的做法是array destructuring：这就是 Bostock 对他的function ready([us]) 所做的事情。在这种情况下，您可以执行以下操作：

Promise.all(promises).then(function([illinois, data]){
    enter code here
});

处理数据

在您的代码中，您似乎正在尝试对两个数据集同时使用data()，这在 D3 中不起作用。我们可以通过循环合并两个数据集，在 GeoJSON 中按名称查找伊利诺伊州的相关“部分”，并附加相关数据。

之后，您只操作一个数据：已合并的illinois 数据。

const parts = illinois.features
parts.forEach(geoJsonObject => {
  const linkedData = data.find(d => d === geoJsonObject.name)
  geoJsonObject.properties.data = linkedData
})
// .. use illinois, access data with properties.data:
svg.selectAll("path")
  .data(illinois.features)
  .enter()
  .append("path")
  .attr("d", path)
  .attr("fill", d => d.properties.data.color)

现在将所有内容都放在data 属性中有点笨拙，但我假设您还有除颜色之外的其他数据。如果没有，请随意将颜色直接附加到对象。

【讨论】：