d3 - 更新數據不會導致刷新

我想寫一個簡單的d3js應用程序，它將顯示一個對象文字數組的圖形。這個文字將定期更新（從後端）。但爲了簡單起見，我用setInterval（）重寫了它，它應該更新內容。d3 - 更新數據不會導致刷新

<!doctype html> 
<html> 
<head> 
    <script src="d3.js" type="text/javascript"></script> 
    <script src="underscore.js" type="text/javascript"></script> 
</head> 
<body> 
<div id="graph"> 

</div> 

<script type="text/javascript"> 
    var data=[ 
     { name: 'NONE', distribution: 5} 
    ]; 
    var graphElement = d3.select("#graph"); 
    // set initial data 
    graphElement.selectAll("p") 
      .data(data, function(d){return d.name}) 
      .enter() 
      .append("p") 
      .text(function(d){return d.name + d.distribution;}); 

    var redraw= function() { 
     console.dir(data); 
     graphElement.selectAll("p") 
       .data(data, function(d){return d.name}) 
       .enter() 
       .append("p") 
       .text(function(d){return d.name + d.distribution;}); 
    }; 


    setInterval(function() { 
     var advice = _.find(data, function(i){return i.name == 'ADVICE'}); 
     if (!advice){ 
      advice = {name: 'ADVICE', distribution: 0}; 
      data.push(advice); 
     } 
     advice.distribution = advice.distribution + 1; 
     redraw(); 
    }, 3000); 
</script> 

</body> 
</html>

該頁面最初將顯示一個段落（如預期的那樣）。然後，setInterval（）啓動，並插入值爲1的「ADVICE」方法。再次如預期的那樣。但是當隨後的setInterval（）啓動時，「ADVICE」節點不會更新 - 即它保持爲「ADVICE1」。

我在這裏遺漏了一些明顯的東西嗎？

感謝您的幫助！

問候，

亞歷

來源

2014-04-17 caffeine_inquisitor

有幾件事要注意這裏：

1）輸入/更新選項沒有被妥善處理;

2）你的advice.distribution沒有與諮詢串刷新從1

UPDATE FIDDLE改變。

var ge = graphElement.selectAll("p") 
    .data(data, function(d){return d.name}); 

ge.exit().remove(); 

ge.enter().append("p"); 

ge.text(function(d){return d.name + d.distribution;});

來源

2014-04-17 01:22:17 FernOfTheAndes

嗨。感謝您的迴應。我可能會誤解data（）方法的函數參數的用途。我認爲這應該返回數據的'標識符'（就像db中的主鍵一樣）。在這種情況下，我的標識符實際上是「名稱」字段。即建議/無。所以我不確定你爲什麼在那裏使用'發行'。其次，我不希望「建議」多次出現。它應該只顯示一次（增加「分配」）。 –

爲了糾正，我更新了小提琴以刷新ADVICE字符串。再次，我的道歉。 – FernOfTheAndes

太棒了！非常感謝！ –

d3 - 更新數據不會導致刷新

回答

相關問題