Обновление пути D3js введите и выйдите

Question

Что мне не хватает?
Я разрешаю пользователям удалять и строить свою собственную точку данных. Мой путь линии рисуется с этим, и он отлично работает.

let self = this; 
     let line = D3['line']() 
      .x(function (d) { return self.getColX(d.x); }) 
      .y(function (d) { return self.getRowY(d.y); }); 
     this.group = this.canvas.append("g") 
      .attr("transform", "translate(25,25)"); 

     //bind the data 
     this.group.selectAll("path") 
      .data(this.data[this.site].drawLine) 
      .enter() 
      .append("path") 
      .attr("d", line) 
      .attr("fill", "none") 
      .attr("stroke", "black"); 

     this.group.selectAll('path').exit().remove() 

Моя проблема в том, если я поп последние координаты, и добавьте новый вызова функцию отрисовки, новые точки получают правильно добавлены, но старые точки не получают удалить.

Например: моя линия идет от (x, y): (1,3) до (3,6) до (7,8), если я удаляю (7,8) и заменяю это на 5,6 , я увижу новую строку от (3,6) до (5,6), но линию от (3,6) до (7,8), которая больше не находится в массиве данных.

Answer 1

Выбранные параметры enter() и exit() создаются после того, как D3 сравнивает ваш выбор с предоставленными данными. Таким образом, они доступны в возвращении этих вызовов:

this.group.selectAll("path") 
      .data(this.data[this.site].drawLine) 

И именно поэтому новые данные добавляются, enter() работает просто отлично.

С this.group.selectAll('path').exit().remove() вы создаете новый отбор, но не сравниваете выбор с любыми данными, поэтому enter() и exit() варианты недоступны для работы.

Короче говоря, просто примените .exit().remove() к вашему первоначальному выбору, и он должен работать. Что-то вроде этого:

let update = this.group.selectAll("path") 
     .data(this.data[this.site].drawLine) 

    update.enter() 
     .append("path") 
     .attr("d", line) 
     .attr("fill", "none") 
     .attr("stroke", "black") 

    update.exit() 
     .remove()