d3.geo的工具提示.圆形鼠标按下总是显示CSV文件的最后一行

Tooltip on d3.geo.circle mousedown always displays last line of CSV file

本文关键字：最后 文件 CSV 一行 显示 工具提示 geo 鼠标 d3      更新时间：2023-09-26

我正在用一些d3.geo构建一个地图。圈上它(与d3.v3.min.js)。一旦你点击了一个圆圈，它所附加的数据就会显示在一个自定义的CSS工具提示中。然而，即使d3.geo。圆圈在地图上显示，工具提示总是显示我的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);总是得到最后一条线，无论哪个位置。圈用户点击。这意味着dot .on("mousedown")总是返回最后一行，而不是与相关圆圈对应的一行。同时，如果我使用nations .on("mousedown")并检查console.log(d.d ID)，我将在地图上获得我将要点击的国家的ID。

以下是我的问题:

  • 为什么它隐式地看起来像是为地理JSON文件而不是为CSV文件工作?与d3。

  • 我如何使这个工作?例如，我如何确保一旦用户单击一个圆圈，显示与此精确圆圈对应的数据，而不是列表中的最后一个?

  • 从概念上讲，我错过了什么?

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

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

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

相关文章：