Лучший способ очистить карту и перерисовать

Question

Я знаю, что динамическое изменение области действия карты в настоящее время невозможно.

Поэтому вместо этого я пытаюсь:

Создайте карту. Произошло какое-то событие. Затем я очищаю карту и рисую новую с новыми деталями, включая новую проекцию.

Проблема в том, что я не могу правильно удалить старую карту. Я пытался взять переменную map, вызвать remove() для свойства svg, использовать "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])

На первый взгляд, все работает хорошо. И производительность в порядке. НО, это не совсем работает должным образом. Например, функция масштабирования больше не работает. Когда кнопка масштабирования нажата, она ищет переменную карты, которую больше не может найти. Что не имеет смысла, так как новая карта создает новые обработчики щелчков для кнопки и тому подобное. Это ПОЧТИ работает.

Но это просто не работает. Какие-нибудь советы? Благодарю.

Answer 1

Немного поздно здесь, но вы можете просто очистить родительский элемент, который содержит диаграмму. Так, например, диаграмма, инициализированная в <div id="chart"></div> можно сбросить, запустив $('#chart').empty(); и повторная инициализация D3 с помощью chart = new Datamap({... element: document.getElementById('chart') ...})

Answer 2

У меня была та же проблема, и я решил ее, удалив элемент с помощью JQuery, а затем снова добавил тот же элемент. Похоже, немного взломать, но это работает для меня.

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

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

Answer 3

Если кто-нибудь придет сюда в поисках решения Angular1.5 (основываясь на ответе jquery выше), вы можете использовать data-ng-if="showMap" (где showMap имеет значение true или false). False, чтобы удалить карту, затем сбросить параметр проекции, затем снова установить showMap в True, и он должен снова добавить его на страницу с новой проекцией.

Это единственное решение, которое я нашел без прямого взлома d3.