在同一个地方用另一个d3可视化替换一个d3可视化？

Question

我正在使用d3的数据地图库，我已经问了there on github这个问题，所以我想在这里交叉发布。

我想要做的是在一张世界地图中可视化两个衡量标准 - 收入不平等（基尼系数）和人均国内生产总值，并且可以在两种观点之间切换。

我快到了。 Here is my example

在顶部，您可以选择要查看的度量并进行更新 - 除了更新的地图绘制在前一个地图之下而不是顶部。即使我在两个地图中引用相同的ID，也会发生这种情况。

我错过了什么？ 谢谢你的帮助！

编辑：我设法让它更好一点 - here is the updated version - 但地图仍然会在它们应该出现的空间下方反复打印。

Answer 1

当我第一次使用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. 您可以使用if / then运算符和map（）函数中的remove（）更改工具提示和其他元素。

那应该让你顺利...