Удалить текст через D3

Question

Я пытаюсь обновить график, основанный на некотором динамическом вводе данных/пользователя на странице. Поскольку данные просто помещаются в столбцы столбцов столбцов и не нуждаются в перемещении, я не думаю, что мне нужна анимация. Просто нужно удалить текущий текст и заменить его новыми значениями.

Код, приведенный ниже, был моим лучшим предположением, однако, похоже, это не делает трюк. .append() отлично работает, однако он просто накладывает новый текст поверх старого, и в итоге он становится нечитаемым (очевидно). Похоже, что это .remove(), что я использую неправильно.

Относительно новичок в D3.js, так что если есть лучший способ, у любого есть какие-либо подсказки/советы, которые они будут оценены.

EDITED на комментарии

 //Remove the old text 
     this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .exit().remove(); 

     //Replace with the new text   
     this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .enter().append("svg:text") 
      .attr("x", function(d, i) { return x(i + .35) + barWidth; }) 
      .attr("y", height - 10) 
      .attr("dx", -barWidth/2) 
      .attr("dy", "15px") 
      .attr("text-anchor", "middle") 
      .attr("style", "font-size: 12; font-family; Helvetica, sans-serif") 
      .text(function(d) { 
       console.log(d.attributes.contract); 
       return d.attributes.contract; 
      }) 
      .attr("transform", "translate(0, 18)") 
      .attr("class", "eoyValue"); 

Answer 1

Так на вершине, не добавляя имя класса я также не вызывая метод transition(). Приведенный ниже код решил проблему.

 this.options.barDemo.selectAll("text.eoyValue") 
      .data(data) 
      .enter().append("svg:text") 
      .attr("x", function(d, i) { return x(i + .35) + barWidth; }) 
      .attr("y", height - 10) 
      .attr("dx", -barWidth/2) 
      .attr("dy", "15px") 
      .attr("text-anchor", "middle") 
      .attr("style", "font-size: 12; font-family; Helvetica, sans-serif") 
      .text(function(d) { return d.attributes.contract; }) 
      .attr("transform", "translate(0, 18)") 
      .attr("class", "eoyValue"); 


     var columnBaseText = this.options.barDemo.selectAll("text.eoyValue").data(data, function (d, i) { 
      console.log(i); 
      return i; 
     }); 

     columnBaseText.transition() 
      .duration(1100) 
      .attr("y", height-10) 
      .text(function (d) { 
       return d.attributes.contract; 
      });