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

回答

相关问题