D3, удаляя точки для обновления с новыми

Question

Я пытаюсь установить функцию, чтобы я мог обновить мою настройку d3 (надеюсь), просто вызвав эту функцию. У меня есть карта d3 с настройкой topojson, и я нахожу ее на графике. Желаемый эффект заключается в том, чтобы пользователь менял данные на карте.

Так внутри моего d3 сценария у меня есть ту часть, где я Plot точки выделены в функции, как так -

function plotPoints(data){ 
svg.selectAll(".pin").exit().remove(); 

svg.selectAll(".pin") 
.data(data.earthquakes) 
.enter().append("circle", ".pin") 
.attr("r",function(d){ 
    return d.magnitude/2; 
}) 
.on('mouseover', tip.show) 
.on('mouseout', tip.hide) 
.attr("transform", function(d) { 
return "translate(" + projection([ 
    d.lon, 
    d.lat 
]) + ")" 

}); 

} 

то в самом низу я начать его с некоторыми образцами данных, таких как -

plotPoints(places); 

Это прекрасно работает - тем не менее, что я Tyring делать наверху там с

thesvg.selectAll(".pin").exit().remove(); 

является Remo перед тем, как добавить второй, все первые пункты. Кажется, я не могу правильно понять эту информацию и не знаю, почему. Когда я запускаю функцию as (без удаления), она просто добавляет новые точки поверх старых. Был бы очень признателен за помощь в этом вопросе. Бонусные баллы, если есть способ анимировать точки взад и вперед с помощью шага. Я не знаю, помогает ли это, но оно находится в угловом приложении. Большое спасибо за чтение.

Edit: я был в состоянии решить эту проблему с помощью

svg.selectAll("circle").remove(); 

Однако, я все еще пытаюсь выяснить, как оживить в/из с шатаются.

Answer 1

Похоже, вы не понимаете, как работают шаблоны ввода, обновления, вывода. Посмотрите на http://bost.ocks.org/mike/join/

Короче говоря, вы звоните exit(), но вы не привязали никаких данных в этом вызове, поэтому выбор exit() будет пустым.

Я хотел бы предложить, что вы хотите изменить svg.selectAll(".pin").exit().remove(); к svg.selectAll(".pin").remove();

Обратите внимание, что я не имею exit() в измененной линии. Теперь строка выберет все элементы DOM с классом pin и удалит их из DOM.