выход() удалить() не удаляет устаревшие элементы

Question

http://jsfiddle.net/brunoperel/z6qfttmr/

Я пытаюсь создать элементы на лету, в зависимости от связи, которая была нажата на:.

d3.select('#processes').selectAll('.processLaunch').data(helperProcessesData).enter() 
    .append('a') 
     .classed('processLaunch', true) 
     .attr('href', 'javascript:void(0)') 
     .text(function(d) { return d.text; }) 
     .on('click', function(d) { 
      var currentProcess=d.name; 
      var filteredData = helperStepsData.filter(function(d) { return d.process === currentProcess; }); 

      var helperStepsForProcess = d3.select('div#helperContainer').selectAll('.helperStep') 
       .data(filteredData); 
      console.log('Filtered data : '+JSON.stringify(filteredData)); 
      console.log('Linked data : '+JSON.stringify(helperStepsForProcess.data())); 
      helperStepsForProcess.enter() 
       .append('div').text(function(d) { return 'Step '+d.step+' : '+d.title; }); 
      helperStepsForProcess.exit().remove(); 
    }); 

Есть (по крайней мере!) две вещи, которые я не понимаю здесь:

• Каждый раз, когда я нажимаю на ссылку, связанные тексты добавляются на страницу, но устаревшие из них не удаляются, даже если я назвал .exit().remove() выбор. Зачем ?
• Когда я делаю console.log данных, которые должны быть привязаны к элементам выделения, он возвращает массив объектов, что хорошо. Но когда в строке после этого я получаю данные, привязанные к элементам, я получаю массив из undefined объектов. Почему бы мне не получить массив объектов?

Answer 1

Я думаю, что вы просто забыли добавить соответствующий класс на ступеньках:

helperStepsForProcess.enter() 
      .append('div') 
      .attr('class', 'helperStep'); 

helperStepsForProcess.text(function(d) { 
    return 'Step '+d.step+' : '+d.title; }); 

Добавление этого в вашей скрипкой вернуть ожидаемый результат.

Надеюсь, это поможет!

Обновление: https://jsfiddle.net/chroth/z6qfttmr/2/