D3中的工具提示如何動態獲取數據？

Question

我們有一些數據

University,Total,Females,Males,Year,Type 
PortSaid,13817,6679,7138,2012,Public 
PortSaid,14790,7527,7263,2013,Public 
PortSaid,17295,8509,8786,2010,Public 
6OctoberUniversity,12507,4297,8210,2012,Private 
6OctoberUniversity,14608,5360,9248,2013,Private 

我嘗試創建餅圖這樣Block附有一個動態提示。 我創建了一個HTML元素手動

 <p> 
      <strong>University is </strong> 
      <span id="UniversityName"></span> 
     </p> 
     <p><span id="NumberStudents"></span> Students</p> 

和創建弧代碼和工具提示

 svg.selectAll("path") 
      .data(pie(data)) 
      .enter().append("path") 
      .each(function(d) { d.outerRadius = outerRadius - 20; }) 
      .attr("d", arc) 
      .on("mouseover", arcTween(outerRadius, 0)) 
      .on("mouseout", arcTween(outerRadius - 20, 150)) 
      .on("mouseover", function(d) { 
       var xPosition = 100; 
       var yPosition = 100; 
       d3.select("#tooltip") 
        .data(pie(data)) 
         .style("left", xPosition + "px") 
         .style("top", yPosition + "px") 
         .select("#NumberStudents") 
         .text(function(d) { return d.value }) 
         .select("#UniversityName") 
         .text(function(d) { return d.value }); 
        //Show the tooltip 
       d3.select("#tooltip").classed("hidden", false); 
       }) 
      .on("mouseout", function() { 

       //Hide the tooltip 
       d3.select("#tooltip").classed("hidden", true);   
      }) 

問題： 工具提示總是返回總計列的第一個值，即13817.它如何根據鼠標懸停弧動態顯示正確的值？

---

編輯：在HTML模板提示代碼片段&添加第二個數據點#UniversityName。

問題2 作爲@minikomi指出的，正確的數據結合將導致與每個弧被獲取正確地相關聯的值。然而，似乎每條弧線都有一個附加的值，正確的標記爲合計。 但是，這會在何處留下每行的其餘數據，如女性，男性或年？我怎樣才能將它們綁定到工具提示？

Answer 1

這可能是值得回顧d3 & data binding背後的想法。

這裏：

.on("mouseover", function(d) { 
      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .data(pie(data)) // re-bind tooltip with entire data set 
        .style("left", xPosition + "px") 
        .style("top", yPosition + "px") 
        .select("#NumberStudents") 
        .text(function(d) { return d.value }); 
       //Show the tooltip 
      d3.select("#tooltip").classed("hidden", false); 
      }) 

原始data是一個數組。當您使用.data,.enter和.each時，不僅會創建餅圖的一部分，而且每個部分還會綁定一個數據點。

因此，當您告訴段響應mouseover事件時，回調函數的參數d將由d3設置爲該段的綁定數據點。

相反，在上面的代碼中，選擇#tooltip元素之後，有以.data(pie(data))通話 - 將結合的整個數據每次鼠標懸停時間設置的提示 - 而且是意外的行爲的原因你觀察。

相反，使用單個數據項（在此函數中d），並將其值設定工具提示文本：

.on("mouseover", function(d) { 
      // d = the single data point used 
      //  to create the segment here 
      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .style("left", xPosition + "px") 
       .style("top", yPosition + "px") 
       .select("#NumberStudents") 
        .text(d.value); 

      d3.select("#tooltip").classed("hidden", false); 
      }) 

要訪問的其它值（從用於創建一個單獨的餅片），請檢查docs的餅圖佈局。原始數據將位於d的.data屬性中。因此，舉例來說，假設你的提示有#SchoolType<span>那麼你可以從Type屬性一樣設置文本：

.on("mouseover", function(d) { 

      var xPosition = 100; 
      var yPosition = 100; 
      d3.select("#tooltip") 
       .style("left", xPosition + "px") 
       .style("top", yPosition + "px") 
       .select("#NumberStudents") 
        .text(d.value) 

      //d.data will hold the original data map 
      d3.select("#tooltip #SchoolType").text(d.data["Type"]); 

      d3.select("#tooltip").classed("hidden", false); 
      })