d3: обновление набора данных не обновляя DOM

Question

Я хочу, чтобы создать список, используя D3, используя следующие данные:

var dataSet = [ 
    { label: 'a', value: 10}, 
    { label: 'b', value: 20}, 
    { label: 'c', value: 30}, 
    { label: 'd', value: 40} 
]; 

var circle = svg.selectAll('circle') 
    .data(dataSet) 
    .enter() 
    .append('circle') 
    .attr({ 
     r:function(d){ return d.value }, 
     cx:function(d, i){ return i * 100 + 50 }, 
     cy:50, 
     fill: 'red' 
    }); 

, который работает. Теперь по прошествии некоторого времени, я могу изменить данные

dataSet[0].value = 40; 
dataSet[1].value = 30; 
dataSet[2].value = 20; 
dataSet[3].value = 10; 

, и я хотел бы еще раз обратить список:

setTimeout(function() { 
    var circle = svg.selectAll('circle') 
     .data(dataSet, function (d) { 
      return d.label; 
     }) 
    .sort(function (a,b){ return d3.ascending(a.value, b.value);}) 
    .enter() 
    .append('circle') 
    .attr({ 
     r:function(d){ return d.value }, 
     cx:function(d, i){ return i * 100 + 50 }, 
     cy:50, 
     fill: 'red' 
    }); 
},1000); 

DEMO

Однако этот список действительно не обновляется. Любые предложения, как это исправить?

Answer 1

Проблема заключается в том, что вы обработку только ввести выбор, который будет пустым при обновлении - вам нужно обрабатывать выбор обновления:

svg.selectAll('circle') 
.data(dataSet, function (d) { 
    return d.label; 
}) 
.sort(function (a,b){ return d3.ascending(a.value, b.value);}) 
.transition() 
.attr({ 
    r:function(d){ return d.value }, 
    cx:function(d, i){ return i * 100 + 50 }, 
    cy:50, 
    fill: 'red' 
}); 

Обновленная скрипка here. Для получения дополнительной информации о различных вариантах см. this tutorial.

Answer 2

вам нужно очистить svg.html(''); в setTimeout
DEMO

Answer 3

Это может быть достигнуто путем удаления существующих кругов первым по телефону:

svg.selectAll('circle').remove() 

, а затем происходит путем добавления их снова с различными данными задавать. Я обновил вашу скрипку http://jsfiddle.net/Q5Jag/1183/

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

Здесь же скрипка с некоторым входом и выходом из анимации http://jsfiddle.net/Q5Jag/1184/