Плавно воодушевляющие новые элементы работают справа, но не слева

Question

Я создал это без слишком много усилий: http://jsfiddle.net/langdonx/J2ykT/1/

Если вы установите флажок анимировать, вы увидите, как элементы фазу в и с правой стороны очень плавно (извините ошибку, если генератор случайных чисел дает вам 0).

Теперь я пытаюсь получить элементы для фазы слева, но оказывается, что selection.insert не вставляет элементы, как я и ожидал. Вы можете увидеть, что я говорю здесь:

http://jsfiddle.net/wqPfR/

Оба 1000 и 1001 получить добавляется к div, но когда я вставляю 999 в мой массив, я ожидал бы .enter() предоставить мне 999, но вместо этого я получаю 1001, потому что кажется, что D3 только добавляет элементы и повторно индексирует существующие элементы так сказать.

Моя проблема в том, что я из-за того, что я буду показывать свои rect элементов, я не могу позволить себе перерисовывать каждую ячейку при создании нового элемента.

Я просто не могу использовать D3 для этой техники, или есть что-то, что мне не хватает?

Answer 1

По умолчанию .data() сопоставляет существующие элементы по индексу. Если вы хотите, чтобы их соответствовали значениям или некоторым внутренним свойствам, вы должны предоставить для этого функцию. В вашем примере, это будет работать:

.data(data, function(d) { return d; }); 

От documentation for .data():

Для управления данными присоединяется к элементам, ключевая функция может быть указан. Это заменяет поведение по умолчанию по умолчанию; ключевая функция вызывается один раз для каждого элемента в новом массиве данных и снова для каждого существующего элемента в выборе.