Question

我正在努力适应我的需求this基于此dataset的非常简洁的示例。

而不是随机生成的数据：

           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，我对此知之甚少。在此先感谢您的帮助。

Answer 1

为了无缝地使用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);

D3 Map - 将数据提供给tootip

1 个答案: