如何为D3滚动引用CSV和GeoJSON

我试图在D3中创建一个滚动映射，它允许我使用标准的world GeoJSON文件和与ISO ID匹配的CSV。在突出显示国家并以不同的颜色对其进行着色时，我能够匹配所有内容，但在填充文本字段时，我似乎无法引用这些值。下面是我的代码选择：

    function setUpChoropleth(error, json, _csv) {
      csv = _csv;

      svg.append("g")
      .selectAll("path")
        .data(topojson.feature(json, json.objects.countries).features)
      .enter().append("svg:path")
        .attr("d", path)
          .on("mouseover", function(d,i) {
            var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );
            d3.select("#map1 h2 span").text(d);
          });

      states2.selectAll("path")
          .data(topojson.feature(json, json.objects.countries).features)
        .enter().append("svg:path")
          .attr("d", path)
          .attr("class", function(d,i) { return "country" + d.id; });
      states3.selectAll("path")
          .data(topojson.feature(json, json.objects.countries).features)
        .enter().append("svg:path")
          .attr("d", path)
          .attr("class", function(d,i) { return "country" + d.id; });

    } 

    function drawTierI() {
      csv.forEach(function(d) { tierById.set(d.id, +d.tier_i); });

      function ready(error, json, _csv) {
        svg.selectAll("path")
            .attr("class", function(d) { return quantize(tierById.get(d.id)); })
            .attr("d", path)
            .on("mouseover", function(d) {
              d3.select("#map1 .panel h3").text(d.id);
            });
      }
      ready();
    }

    $('button#tier_i').click(function (e) {
      drawTierI();
      d3.select("#map1 .panel-title").text("Countries equipped with drones")
      d3.select("#map1 .panel-body").text("These countries are equipped with drones.")
    });

我这里还有一个演示：

当你点击“拥有无人驾驶飞机”链接并滚动国家时，我可以访问的唯一变量是GeoJSON中的变量。是否可以使用我在地图上高亮显示CSV数据时使用的相同连接，从同一个spreasheet wod.CSV导入数据

请帮帮我，哪怕是一个线索都会有帮助的

---

谢谢

Lar和我的想法都涉及到迭代数据和匹配ID。Lars会在飞行中执行此操作，因此每当您将鼠标悬停在某个元素上时，相关文本都会在“报告”选项卡中弹出。另一方面，在mine中，您在加载数据之后对其进行预处理，以便将csv数据连接到geojson数据。这可能会为您节省大量时间，具体取决于您拥有的数据量，因为连接只执行一次

数据连接发生在如下函数中：

    csv.forEach(function(d, i) {
        geojson.forEach(function(e, j) {
            if (d.id === e.id) {
                e.name = d.name
            }
        })
    })

这段代码要求csv中有一列包含id列表，id列表与json文件中的某个属性匹配，我假设该属性也称为id。这段代码有两个循环，外部循环用于csv数据，内部循环用于geojson数据。外部循环选择csv中的第一个id值，然后对照json中的id值进行检查，当找到一个匹配的id值时，它在json中创建一个名为name的新变量，并从csv文件中添加相应的name值

---

您可以在操作中看到它

您可以将CSV合并到TopoJSON中，请参阅有没有一种方法可以在不将数据与TopoJSON合并的情况下执行此操作？我希望我可以重复更新这些数据，这比让我们的一名员工在命令行上运行TopoJSON更容易编辑一个单独的CSV。当然，然后你必须手动进行匹配。也就是说，在鼠标悬停时获取ID并遍历CSV数据，直到找到该ID。这很有意义。我该去哪里开始想办法？我假设我需要一个Javascript for循环，对吗？我是从不同的mbostock示例和一些帮助中拼凑出来的，所以我一直在这个问题上碰壁。你也可以遍历geojson并添加一个id匹配的属性。非常感谢！我试过了，但还是不够。您的JSON中似乎已经有一个名称字段，而在我的示例中却没有，这有区别吗？我还使用了不同的json和CSV文件，并使用topojson绘制地图。下面是我的代码，它遵循您的示例：我以为您在使用goejson！不用担心，您无论如何都必须将topojson解包为geojson，因此我的bl.ock中的代码只需要一些额外的更改。我看过你的地图，当我检查topojson数据时，我在对象中看不到任何属性，这意味着上面代码中循环中的json数据中没有任何可匹配的属性。当您转换为topojson时，默认情况下它不包含属性，您必须使用-p开关。我在这个问题中已经讨论了一些，非常感谢！我终于明白了。我切换到geojson，稍微改变了一下循环，然后砰的一声，地图按预期工作。这是我的完整演示，代码如下：