d3.js переход(). Remove() не работает

Question

У меня проблема с визуализацией в d3.js.

У меня есть три группы, содержащие почти идентичные визуализации, которые берут на себя «множественные небольшие» визуализации. Визуализация включает временную шкалу, после изменения которой необходимо добавить/удалить соответствующие точки данных. Вот код, который делает обновление:.

var channels = { bt: { x: 0, y: -100 }, sms: { x: -300, y: 200 }, call: { x: 300, y: 200 } }; 
     //Draw web for each channel 
     for (channel in channels) { 
      this.circles[channel] = this.web[channel].selectAll("circle") 
        .data(this.displayedNodes, function (d) { 
         return d.id; 
        }); 

      this.circles[channel].exit().transition().duration(500).attr("r", 0).remove(); 

      this.circles[channel].enter() 
        .append("circle") 
        .attr("class", "person") 
        .attr("r", 0) 
        .attr("cx", function (d) { 
         return d.friendScales[channel](chart.minScores[channel]).x; 
        }) 
        .attr("cy", function (d) { 
         return d.friendScales[channel](chart.minScores[channel]).y; 
        }) 
        .attr("fill", function (d) { 
         //return chart.clusterColors[d.cluster]; 
         return chart.colors[channel]; 
        }) 
        .attr("stroke-width", 2) 
        .attr("stroke", function (d) { 
         return d3.rgb(chart.colors[channel]).darker(); 
        }) 
        .attr("id", function (d) { 
         return "bubble_" + d.id; 
        }) 
        .on("mouseover", function (d, i) { 
         return chart.show_details(d, i, this); 
        }) 
        .on("mouseout", function (d, i) { 
         return chart.hide_details(d, i, this); 
        }); 
     } 

.exit() переход() удалить() часть не делает ничего, круги просто выскользнуть, так как их значение данных теперь 0. Однако, если я открываю. консоль Chrome и вручную введите то же самое, на что это оценивается, она отлично работает. Я предполагаю, что это имеет какое-то отношение к асинхронной модели JavaScript, я не являюсь JS wiz, поэтому я немного в убытке, это должно быть хорошо на любом другом языке ...

Любые идеи очень ценятся !

Чтобы добавить от комментариев, так как они становятся огромна:

Рабочий пример: http://www.student.dtu.dk/~s103826/ Код: https://github.com/haljin/d3-webchart/blob/master/Sensible/js/WebChart.js

Чтобы увидеть проблему: Перетащите серый прямоугольник на временной шкале (изменить размер Draggin края) на область в конце, которая не имеет данных - круги должны исчезнуть в соответствии с exit().transition().remove(), но нет. Если я установил точку останова в этой области, и введите ее в консоли Chrome, они это сделают.

Answer 1

Благодаря Ларсу за помощь, я был вновь выбрать все круги, а не использовать существующий выбор обновления this.circles :)

теперь я чувствую себя глупо.