d3.geo.circle鼠标向下的工具提示总是显示CSV文件的最后一行。

Question

我正在构建一个地图，上面有几个d3.geo.circle (带有d3.v3.min.js)。单击圆圈后，附加到它的数据应显示在自定义CSS工具提示中。然而，即使d3.geo.circle显示在地图上，工具提示总是显示我的CSV文件的最后一行，无论单击哪个圆圈。

下面是我的代码片段：

d3.json("json/world-countries.json", function(collection) {
  var countries = svg.selectAll("path")
    .data(collection.features)
    .enter().append("path")
    .attr("class", "boundary")
    .attr("id", function(d) {return d.id;})
    .attr("d", path);

d3.csv("csv/object-data.csv", function(data) {
   var dots = svg.selectAll("dots")
      .data(data)
      .enter().append("path")
      .attr("class", "dots")
      .datum(function(d) {return d3.geo.circle().origin([ d.longitude, d.latitude ]).angle(d.radius)();})
      .attr("d", path);

data.forEach(function(d) {
            id = +d.id;
            name = d.name;

dots.on("mousedown", function(d) {
    d3.select("#ObjectID").html('<div class="box-title"><strong>Object ID</strong></div>'
        +  '<table><tr><td>Project name</td><td>' + name);

CSV文件如下所示：

id,longitude,latitude,radius,name
0,2.343333,48.848611,1,Paris
1,-0.126267,51.507548,0.987230769,London

我检查了console.log(id)；始终得到最后一行，无论用户单击哪个geo.circle。这意味着dots.on("mousedown")总是返回最后一行，而不是相应的循环。同时，如果我使用countries.on("mousedown")并检查console.log(d.id)，我将在我要点击的地图上获得该国的ID。

以下是我的问题：

• 为什么它看起来像是在处理地理JSON文件而不是CSV文件呢？与d3.geo有关的事实有关联吗？
• 我该怎么做呢？在这里，我如何确保一旦用户单击一个圆，对应于这个精确圆圈的数据就会显示出来，而不是列表中的最后一个？
• 从概念上讲，我错过了什么？这感觉很明显，我一直没想过。

Answer 1

好的，我找到了解决办法。

首先，您需要创建一个变量并将数据推入其中。

    var projectdata = [];
    data.forEach(function(e,i) {
            projectdata.push({
            id : e.id,
            name : e.name,});});

然后，您需要返回点击后的每个点的id，并使其与相关数据相对应。

    var dots = svg.selectAll("dots")
                          .data(data)
                          .enter().append("path")
                            .attr("id", function(d) {return d.id;})
                            .attr("class", "dots")
                            .datum(function(d) {return d3.geo.circle().origin([ d.longitude, d.latitude ]).angle(d.radius)();})
                            .attr("d", path)
                            .on("mousedown", function(d) {
                            var i = this.id-1;
                            d3.select("#ObjectID").html('<div class="box-title"><strong>Object ID</strong></div>'
                        +  '<table><tr><td>Project name</td><td>' + projectdata[i].name);

这就成功了！将张贴的结果，一旦它在线。特别感谢@elias和@pwetosaurus，这些问题让我改变了对这个问题的看法。