0

我正在使用 d3 的 datamaps 库,我在 github 上没有成功地问过这个问题,所以我想在这里交叉发布。

我正在尝试做的是在一张世界地图中可视化两种衡量标准——收入不平等(基尼)和人均 GDP,并使得在这两种观点之间切换成为可能。

我快到了。这是我的例子

在顶部,您可以选择要查看的度量和更新的工作 - 除了更新的地图绘制在前一个下方而不是顶部。即使我指的是两张地图的相同 id,这种情况也会发生。

我错过了什么?谢谢你帮助我!

编辑:我设法让它变得更好一点——这是更新的版本——但地图仍然一遍又一遍地打印在它们应该出现的空间下方。

4

1 回答 1

0

当我第一次使用 D3 时,我犯了很多同样的错误。您必须使用 enter()、update()、exit() 模式。有很多关于如何做到这一点的好教程。从根本上说,您的结构设置不正确,会给您带来麻烦。

对于您的代码,您需要执行以下操作:

  1. 在 map 函数内移动对 map() 的初始调用。
  2. 将 map() 函数嵌套在您配置变量的另一个函数中。您需要在此处进行所有全局数据/变量定义。
  3. 在该配置函数中,包含 d3.select(#radialbuttonname) 并重新运行 map() 函数以更新图表 on.click。
  4. 在 map 函数中,您需要为 .data().enter()、.data.exit().remove() 和 .data().transition() 创建函数。这将用新地图替换相同的 SVG 地图区域,而不仅仅是在下面附加更多的 svg。
  5. 您可以使用 map() 函数中的 if/then 运算符和 remove() 更改工具提示和其他元素。

那应该让你上路..

于 2014-06-12T14:56:27.527 回答