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);
        });
}

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

当用户点击STOP按钮时，工具提示容器应该从＆＃34; warnings.csv＆＃34;显示当天的相应警告文本。文件。可以从此处下载csv文件：https://nlet.brc.tamus.edu/Home/Swat），选择SWAT下载部分中的Management选项卡，然后选择＆＃34; Warnings csv文件＆＃34;。

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

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

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);
            }
        }            
    });
}

使用csv文件向d3.js映射添加工具提示

1 个答案: