添加工具提示使用CSV文件

Question

到d3.js地圖我想補充工具提示以前在這裏討論一個項目：

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> 

我還添加了HTML工具提示容器在一個div：

<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」文件的當天警告文本。通過選擇SWAT下載部分中的Management選項卡並選擇「Warnings csv file」，可從此處下載csv文件：https://nlet.brc.tamus.edu/Home/Swat）。

然後，當用戶將鼠標懸停在地圖上時，工具提示容器應切換到該縣，並在當天顯示相應的縣警告。

感謝任何幫助。提前致謝。

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