3

我知道目前无法动态更改地图的范围。

所以相反，我试图：

创建地图 发生了一些事件，然后我废弃了地图并绘制了一张新的地图，其中包含新的细节，包括新的投影。

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

创建新地图的功能：

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;

}

我将地图初始化basic如下

basic = createMap([2,46]);

然后我稍后清理地图（我的破坏功能）并重新分配：

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

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

但这只是行不通。有小费吗？谢谢。

4

3 回答 3

3

这里有点晚了，但您可以简单地清空包含图表的父元素。因此，例如，<div id="chart"></div>可以通过运行$('#chart').empty();并重新初始化 D3来重置初始化的图表chart = new Datamap({... element: document.getElementById('chart') ...})

于 2017-04-19T14:24:15.363 回答
3

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

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

        var mapData = getMapData();
        var map = new Datamap(mapData);
于 2016-02-12T17:11:50.000 回答
1

如果有人来这里寻找 Angular1.5 解决方案（基于上面的 jquery 答案），那么您可以使用 data-ng-if="showMap" （其中 showMap 为真或假）。False 删除地图，然后重置投影选项，然后将 showMap 再次设置为 True，它应该使用新投影再次将其添加到页面中。

这是迄今为止我发现的唯一没有直接破解 d3 的解决方案。

于 2016-11-17T16:39:08.887 回答