D3 Update vs New Item при использовании ключевой функции
Я пытаюсь использовать D3 для отображения некоторых данных. У меня есть массив объектов с парами ключ-значение.
let data = [{k:'kfoo',v:'vfoo'},{k:'kbar',v:'vbar'}];
function doit(somedata){
let bod = d3.select('body');
let rows = bod.selectAll('div.row').data(somedata, d=>d.k);
rows.exit().remove();
let newRows = rows.enter().append('div').classed('row', true);
newRows.append('span').text(d=>d.k);
newRows.append('span').text(' ');
newRows.append('span').text(d=>d.v);
//rows.selectAll('span:first-child').text(d=>d.k);
rows.selectAll('span:last-child').text(d=>d.v)
}
doit(data);
setTimeout(function(){
data[0].k = 'kfoo1';
data[0].v = 'vfoo1';
doit(data);
}, 3000);<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>https://jsfiddle.net/dfw0m1ga/1/
Почему, когда я изменяю значение в data[0].k, я ожидал, что это приведет к тому, что d3 интерпретирует элементы 0 как новый элемент. Скорее, он интерпретирует это как обновление. Почему?
прочтите документацию о d3.selectAll()
Исправлена ссылка на скрипт js.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Данные, которые вы изменяете, связаны, поэтому, если вы изменяете объект, связанный объект также изменяется, и ключевые функции совпадают.
Удалите первый объект и добавьте новый объект. Здесь он жестко запрограммирован, но вы можете найти метод, который подходит для ваших реальных данных приложения.
let data = [{k:'kfoo',v:'vfoo'},{k:'kbar',v:'vbar'}];
function doit(somedata){
let bod = d3.select('body');
let rows = bod.selectAll('div.row').data(somedata, d=>d.k);
rows.exit().remove();
let newRows = rows.enter().append('div').classed('row', true);
newRows.append('span').text(d=>d.k);
newRows.append('span').text(' ');
newRows.append('span').text(d=>d.v);
//rows.selectAll('span:first-child').text(d=>d.k);
rows.selectAll('span:last-child').text(d=>d.v)
}
doit(data);
setTimeout(function(){
data = [data[1]];
data.push( {k:'kfoo1',v:'vfoo1'} );
doit(data);
}, 3000);<script src = "https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>в течение 1 минуты после публикации ответа я уже проголосовал против ответа, который объясняет причину.
Если ключ изменился, почему d3 не видит это как новый элемент, таким образом удаляя старый элемент и добавляя новый.
Прочтите первую строчку ответа.
Ах .... Он привязан к ссылке на объект. Не на копию ... Похоже, это сработало, как и ожидалось. jsfiddle.net/dfw0m1ga/2
Приятно: полностью пустой jsfiddle