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，问题让我改变了对问题的看法。

d3.geo.circle mousedown上的工具提示始终显示CSV文件的最后一行

1 个答案: