外部dom元素上的D3.js事件處理程序觸發SVG樹節點的重繪

Question

我有一個構建d3顯示的函數，其中有一個稱為update()的函數，該函數實際上處理節點。

該功能可以在這里看到

如您所見，將創建svg樹，然后運行update()函數，顯示樹節點。

單擊具有特定數據屬性的樹節點時，會將html form添加到屏幕，該form允許用戶添加與該節點有關的數據。 用戶輸入數據，單擊“保存”，該文件具有附加的基於jQuery的event處理程序，可更新數據源。

然后，我需要觸發樹以使用顯示新數據的節點進行更新。

我不確定如何從外部函數觸發此update()函數。 我不想每次都重建整個樹，只需要重繪節點以顯示新數據即可。

我對如何執行此操作的了解在哪里？

Answer 1

這似乎更多是JavaScript范圍的問題。 tree_data是否已經公開給其他函數使用（例如，在jQuery事件處理程序中，您可以console.log(tree_data ）嗎？如果是，那么我們只需要一個外部引用即可進行update 。

一種快速的方法是將其分配給全局window范圍：

window.update = function(source) { ...

當然這不是最佳選擇，但確實可以幫助我們縮小問題范圍。

如果build: function(tree_data) ，那么我們只需要在build: function(tree_data)范圍之外聲明一個變量build: function(tree_data) ，然后在第65行的內部將其分配給update ：

var externalReferenceToUpdate;

[...]

build: function(tree_data) {
[...]
   var update = function(source) {
   [...]
   };
   externalReferenceToUpdate = update;

   update(root);  // moved this due to function expression vs. declaration

   [...]
}

如您所見，我們必須移動update(root) 。 這是因為我們使用了不同的方法來“制作”函數。 關於聲明函數及其作用域問題的方式，還有其他有關堆棧溢出的討論 。 從本質上講，使用第二種方法（ var name = function() ），該函數不會 “提升”到其作用域的頂部，因此在將其分配給變量之后，我們必須調用update 。

希望這可以幫助！

PS在其他討論中，略過第一個答案，實際上着重於Eugene的第二個答案 。