D3地图-将数据提供给tootip [英] D3 Map - feeding data to tootip

问题描述

我正在尝试适应我的需求此基于此数据集.

I am trying to adapt to my needs this very neat example based on this dataset.

代替随机生成的数据:

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

我想显示一些属性，例如州的实际人口或面积.我试图在uStates.js的每一行中添加属性

I would like to display some of the properties e.g. real population or area of the state. I was trying to add properties to each line in 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出现).

but it doesn't work (in place of a value an undefined appears).

我的本​​机软件是 R .我在那里找不到合适的解决方案，因此我正在尝试使用Java运气，我对此了解甚少.在此先感谢您的帮助.

My native software is R. I did not find a suitable solution there thus I am trying my luck with Javascript to which I know very little. Thanks in advance for help.

推荐答案

为了无缝使用uStates.js，应将自己的数据与路径坐标分开(简而言之:请勿编辑uStates.js ).

In order to use uStates.js seamlessly, your own data should be separated from the path coordinates (in short: do not edit uStates.js).

您的数据格式应为:

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

color字段对于uState必须起作用.您可以使其自动适应其他值，也可以将数据转换为这种格式(如果您以其他方式获得)(但这不是此答案的范围，请随时询问有关此内容的更多信息).

The color field is mandatory for uStates to work. You can make it fit your other values automatically, and you can also convert your data to this format if you have it in another way (but this is not the scope of this answer, don't hesitate to ask for more about this).

然后，您只需要编辑tooltipHTML函数以获取数据(d)的pop和area字段:

Then, you only need to edit the tooltipHTML function to take the pop and area fields of your data (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

Finally, call uStates with

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

这篇关于D3地图-将数据提供给tootip的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！