D3：不更新DOM

更新的數據集，我想創建使用D3使用下面的數據列表：D3：不更新DOM

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

然而，這個名單是不是真的更新。任何建議如何解決這個問題？

來源

2015-07-03 Jeanluca Scaljeri

的問題是，你正在處理只有輸入選擇，這將是空的更新 - 你需要處理更新的選擇：

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。

來源

2015-07-03 17:12:40

你的小提琴似乎不工作，所以我已經修復它[這裏]（http://jsfiddle.net/Q5Jag/1193/）Thnx –

@JeanlucaScaljeri我已經離開'.sort（）'，因爲這就是你原來的小提琴。雖然沒有它可能會更有意義:) –

需要通過調用來清除svg.html('');在setTimeout
DEMO

來源

2015-07-03 12:15:20 ozil

沒有真正的需要清除整個svg，特別是如果有任何其他項目不需要隨時間改變。 –

這可以通過首先刪除現有的社交圈中完成：

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

，隨後通過不同的數據再次加入他們去組。我更新了你的小提琴http://jsfiddle.net/Q5Jag/1183/

希望這會有所幫助。

這裏是相同搗鼓一些進入和退出動畫http://jsfiddle.net/Q5Jag/1184/

來源

2015-07-03 12:15:44

不錯。但有什麼方法可以使用某種動畫（'transition（）'）更改列表？ –

檢查此更新的小提琴...授予它不是很乾淨，可以改善噸... http://jsfiddle.net/Q5Jag/1184/ –

D3：不更新DOM

回答

相關問題