如何更新d3.js中的條形圖？

Question

我試圖在用戶單擊按鈕時更新d3.js條形圖。

我一直在添加一個轉換某處作爲顯示here，但它並沒有動態更新我的數據。

我正在使用這個jsfiddle。

我已經試過類似如下的代碼，但它不更新我的數據：

btn.onclick = function(){ 
    data.push({date: new Date(2013, 3, 10), total: 78}); 
    updatePlot(); 
} 

function updatePlot(){ 
    d3.select('#graphTest').transition(); 
} 

如何更改我的updatePlot方法，以便它在我的條形圖更新數據？

Answer 1

它看起來像你跳過幾個步驟。 D3在幕後實際上並沒有給你帶來很多魔力。您仍然需要推送數據並自己更新DOM。 D3只是爲管理這個過程提供了一個方便的編程模型。

因此，任何可視化你已經得到了以下有趣的作品：

1. 數據陣列
2. DOM節點綁定到DOM節點
3. 數據數組元素。
4. DOM節點上的屬性和樣式。

您的代碼正在更新數據數組，但它不管理其他任何部分。您需要將更新後的數據重新存入DOM（特別是使節點可見的屬性/樣式）。

所以更新劇情需要做到以下幾點：

1. 呼叫selection.data新數據綁定到現有的DOM。您可以定義一個關鍵函數來控制數據如何映射到DOM節點。
2. 處理enter,exit和update選擇，但是你喜歡。
3. 根據新數據轉換屬性和樣式。

對於＃3，這不僅僅是調用selection.transition的問題，而是您需要考慮您希望轉換的屬性和樣式。在轉換中調用attr和style與在選擇上調用它們完全相同，除了DOM使用插值更新多次而不是使用最終值更新一次。

要更好地理解此過程，您應該閱讀Thinking with Joins和Working with Transitions。