d3.js映射：使用geojson文件和CSV数据_Csv_D3.js_Data Binding_Geojson

d3.js映射：使用geojson文件和CSV数据

csv d3.js data-binding

d3.js映射：使用geojson文件和CSV数据,csv,d3.js,data-binding,geojson,Csv,D3.js,Data Binding,Geojson,我在d3.js中获取地图以响应csv或tsv中保存的数据时遇到问题。我正在使用geojson文件，并且已经成功地显示了伊利诺伊州的县边界。但是，映射不响应tsv文件中的数据我怀疑问题可能是我将数据-数据-绑定到路径的地方。马克·博斯托克使用 .datatopojson.featureus，us.objects.countries.features，但这是基于一个我不完全理解的函数结构：函数就绪[us]我怀疑我的代码中有问题的一行是.datavalues[0]。功能，值[population]

我在d3.js中获取地图以响应csv或tsv中保存的数据时遇到问题。我正在使用geojson文件，并且已经成功地显示了伊利诺伊州的县边界。但是，映射不响应tsv文件中的数据

我怀疑问题可能是我将数据-数据-绑定到路径的地方。马克·博斯托克使用 .datatopojson.featureus，us.objects.countries.features，但这是基于一个我不完全理解的函数结构：函数就绪[us]我怀疑我的代码中有问题的一行是.datavalues[0]。功能，值[population]

这是我的全部代码，它生成了伊利诺斯州的地图，但没有其他内容。为了便于故障排除，我将数据精简为填充颜色

我的json文件在这里可用：数据在这里：

很抱歉没有在JFIDLE上发布，但我认为我在那里遇到了域冲突问题

<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在本地机器上运行它

谢谢你的帮助

加载数据 Promise.all返回一组已兑现的承诺。要使用它们，可以直接从值数组访问它们

一件方便的事情是：这就是Bostock使用其函数ready（我们）所做的。在这种情况下，您可以执行以下操作：

Promise.allpromises.thenfunction[伊利诺伊州，数据]{ 在这里输入代码 }; 处理数据在代码中，您试图做的似乎是同时使用两个数据集的数据，这在D3中不起作用。我们可以通过一个循环合并这两个数据集，该循环在GeoJSON中按名称查找伊利诺伊州的相关部分，并附加相关数据

之后，您只操作一个数据：已合并的伊利诺伊州数据

const parts=伊利诺伊州。特征 parts.forEachgeoJsonObject=>{ const linkedData=data.findd=>d==geoJsonObject.name geoJsonObject.properties.data=linkedData } // .. 使用伊利诺伊州，访问具有属性的数据。数据： svg.selectAllpath .特点进来 .appendpath .attrd，路径 .attrfill，d=>d.properties.data.color 现在将所有内容都放在data属性中有点麻烦，但我假设您有颜色以外的其他数据。如果没有，可以直接向对象添加颜色。

加载数据 Promise.all返回一组已兑现的承诺。要使用它们，可以直接从值数组访问它们

一件方便的事情是：这就是Bostock使用其函数ready（我们）所做的。在这种情况下，您可以执行以下操作：

之后，您只操作一个数据：已合并的伊利诺伊州数据