datamaps - 清除 map 并重新绘制的最佳方法

Question

我知道动态更改 map 的范围目前是不可能的。

所以我正在尝试:

创建 map 某些事件发生 然后，我废弃 map 并绘制一张包含新细节(包括新投影)的新 map 。

问题是我无法正确废弃旧 map 。我试图获取map变量，在svg属性上调用remove()，出于性能目的使用“delete svg”，然后解构该对象。然后将map变量重新分配给函数A的结果，其中函数A只是设置了一个新的map。

创建新 map 的函数:

function createMap (latlon){
var basicMap = new Datamap({
  element: document.getElementById("basic"),
    setProjection: function(element) {
var projection = d3.geo.equirectangular()
  .center(latlon)
  .rotate([0, 0])
  .scale(1200)
  .translate([element.offsetWidth / 2, element.offsetHeight / 2]);
var path = d3.geo.path()
  .projection(projection);

return {path: path, projection: projection};
},
  projection: "mercator",
  scope: 'world',
   fills: {
        defaultFill: "#ABDDA4",
      },
  responsive: true,
    done: function(datamap){
        datamap.svg.call(d3.behavior.zoom().on("zoom", redraw));
        $("#resetZoom").on("click", function(){
   resetZoom();
})
        function redraw() {
            datamap.svg.selectAll("g").attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }
        function resetZoom() { datamap.svg.selectAll("g").attr("transform", "translate(0,0)scale(1.0)"); }
},
});
return basicMap
}

销毁函数:

function cleanUp(map){
map.svg.remove();
delete map.svg;
delete map;

}

我将 map 初始化为basic，如下

basic = createMap([2,46]);

然后我清理 map (我的销毁函数)并重新分配:

cleanUp(basic);
basic = createMap([personLon, personLat])

表面上看，一切正常。而且性能还可以。但是，它并没有真正正常工作。例如，缩放功能不再起作用。当按下缩放按钮时，它会寻找 map 变量，但它再也找不到了。这是没有意义的，因为新 map 为按钮等创建了新的单击处理程序。它几乎可以工作。

但这根本行不通。有小费吗？谢谢。

Answer 1

我遇到了同样的问题，并通过使用 JQuery 删除该元素然后再次重新添加相同的元素来解决它。看起来有点像黑客，但它对我有用。

        $("#drilldown-map").parent().append( "<div id='drilldown-map' />");
        $("#drilldown-map").remove();

        var mapData = getMapData();
        var map = new Datamap(mapData);