使用 csv 文件向 d3.js 地图添加工具提示

Question

我想为之前在这里讨论过的项目添加工具提示：

How to apply specific colors to D3.js map based on data values?

我为工具提示容器添加了如下样式：

<style>
#tooltip-container{
      background: #eee;
      box-shadow: 0 0 5px #999999;
      color: #333;
      display: none;
      font-size: 12px;      
      padding: 10px;
      position: absolute;
      text-align: center;
      right: 200px;
      top: 300px;
      width: 140px;
      height: 230px;
      z-index: 10;
    }
</style>

我还在 div 中添加了 html 工具提示容器：

<div id="tooltip-container"></div>

我已将 drawMap() 函数修改如下：

function drawMap(conus) {
    svg.selectAll(".feature") 
      .data(conus.features)   
      .enter().append("path") 
      .attr("class", "county")
      .attr("id", function (d) { return d.properties.ID_1; }, true)  
      .attr("d", path) 
      .on("mouseover", function (d) {
          $("#tooltip-container").show();
      })
      .on("mouseout", function () {
          $("#tooltip-container").hide();
      });

    //Fill county colors
    var dataRange = getDataRange(); 

    d3.selectAll('.county')
        .attr('fill', function (d) {
            return getColor(d.properties[attributeArray[currentAttribute]], dataRange);
        });
}

我现在需要做的事情如下：

当用户单击“停止”按钮时，工具提示容器应显示“warnings.csv”文件中当天的相应警告文本。可以从此处下载 csv 文件：https://nlet.brc.tamus.edu/Home/Swat)，方法是选择 SWAT 下载部分的管理选项卡并选择“警告 csv 文件”。

然后，当用户将鼠标悬停在地图上时，工具提示容器应切换到该县并显示该县当天的相应警告。

感谢任何帮助。提前致谢。

Answer 1

没关系...解决了这个问题。我从这个项目中修改了以下功能：

<div id="tooltip-container"></div>
function drawMap(conus) {
    var curr = $("#clock")[0].innerText;
    var day = curr.charAt(0);

    svg.selectAll(".feature")   // select country objects (which don't exist yet)
      .data(conus.features)   // bind data to these non-existent objects
      .enter().append("path") // prepare data to be appended to paths
      .attr("class", "county") // give them a class for styling and access later
      .attr("id", function (d) { return d.properties.ID_1; }, true)  // give each a unique id for access later
      .attr("d", path) // create them using the svg path generator defined above
      .on("mouseover", function (d) {
          $("#tooltip-container").show();
          loadWarning(d, day);
      })
      .on("mouseout", function (d) {
          $("#tooltip-container").hide();
      });

    var dataRange = getDataRange(); // get the min/max values from the current day's range of data values

    d3.selectAll('.county')
        .attr('fill', function (d) {
            return getColor(d.properties[attributeArray[currentAttribute]], dataRange);
        });
}

function loadWarning(d, day)
{
    var html = "";
    var tooltip = d3.select("#tooltip-container");

    d3.csv("/data/warnings2.csv", function (error, data) {  
        for (var i in data) {
            if (data[i].id == d.properties.ID_1) {
                html += "<table><tr><strong>" + d.properties.County + "</strong></tr><br/>" +
                 "<tr>ID:  " + d.properties.ID_1 + "</tr><br/><br/>" +
                 "<tr><div style='text-align:left'>" + data[i][day] + "</div></tr></table>";

                tooltip.html(html);
            }
        }            
    });
}