D3地圖 - 將數據提供給tootip

我正在嘗試適應我的需求this基於此dataset的非常簡潔的示例。D3地圖 - 將數據提供給tootip

相反隨機產生的數據：

  var low=Math.round(100*Math.random()), 
      mid=Math.round(100*Math.random()), 
      high=Math.round(100*Math.random());`

我想顯示的一些屬性例如真實的人口或國家的面積。我試圖性質uStates.js

{id:"OH",n:"Ohio", pop:"11.59", area:"116,096", d:"M735.32497,(..),193.32832Z"},

添加到每個行，將其插入到tooltipHTML功能

  function tooltipHtml(n, d, pop, area) 
      return "<h4>"+n+"</h4><table>"+ 
      "<tr><td> Population </td><td>"+pop+"</td></tr>"+ 
      "<tr><td> Area </td><td>"+area+"</td></tr>"+ 
      "</table>";

，但它不工作（代替值undefined出現的）。

我的本機軟件是R。我沒有找到合適的解決方案，因此我正在嘗試用我知道的Javascript很少的運氣。預先感謝您的幫助。

來源

2016-03-01 SuzukiBlue

你可以分享你嘗試自定義'tooltipHTML'函數？這是正確的方法，所以這將有助於知道錯誤在哪裏。 – tarulen

嗨勞倫特，剛剛更新並添加了工具提示HTML – SuzukiBlue

爲了無縫地使用uStates.js，你自己的數據應該與路徑座標分開（簡而言之：不要編輯uStates.js）。

爲您的數據格式應該是：

var data={ 
    "OH": {pop:"11.59", area:"116,096", color:"#FFF"}, 
    "NY": { ... }, 
    ... 
    };

的color字段是強制性的uStates工作。您可以自動使其適合您的其他值，並且如果以其他方式使用它，也可以將數據轉換爲此格式（但這不是此答案的範圍，請不要猶豫，以瞭解更多信息）。

然後，您只需要編輯tooltipHTML功能把你的數據的pop和area領域（d）：

function tooltipHtml(n, d) { 
     return "<h4>"+n+"</h4><table>"+ 
     "<tr><td>Low Low Low</td><td>"+d.pop+"</td></tr>"+ 
     "<tr><td>Average Average</td><td>"+d.area+"</td></tr>"+ 
     "</table>"; 
    }

最後，調用uStates與

uStates.draw("#statesvg", data, tooltipHtml);

來源

2016-03-01 13:02:43 tarulen

非常感謝你**勞倫特**！它像魅力一樣工作。 – SuzukiBlue

我剛剛提出了你的答案。我有另一個問題關於這個例子和數據集制定在另一個線程：排除多邊形懸停。也許它會落在你的興趣範圍之內。 – SuzukiBlue

如果解決了您的問題，請不要猶豫，接受答案;） – tarulen

D3地圖 - 將數據提供給tootip

回答

相關問題