javascript - 外部 dom 元素上的 D3.js 事件处理程序触发 svg 树节点的重绘

Question

我有一个构建我的 d3 显示的函数，其中有一个名为 update() 的函数，它实际上处理节点。

函数可以看here

如您所见，创建了 svg 树，然后运行 ​​update() 函数，显示树节点。

当单击具有特定数据属性的树节点时，html form 将附加到屏幕，允许用户添加与该节点相关的数据。用户输入数据，单击“保存”，其中附加了一个基于 jQuery 的 event 处理程序，用于更新数据源。

然后我需要触发树更新显示新数据的节点。

我不确定如何从外部函数触发此 update() 函数。我不想每次都重建整棵树，只需重新绘制节点即可显示新数据。

我对如何执行此操作的理解有何差距？

Answer 1

这似乎更像是一个 JavaScript 范围问题。 tree_data 是否已经暴露给其他函数(例如，在 jQuery 事件处理程序中，您可以 console.log(tree_data) 吗？如果是这样，那么我们只需要对 更新。

一种快速的方法是将其分配给全局 window 范围:

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

当然这不是最佳选择，但它确实有助于我们缩小您的问题范围。

如果可行，那么我们只需要在 build: function(tree_data) 范围之外声明一个变量，然后在 line 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)。这是因为我们使用不同的方法“制作”了该函数。有一个 whole other Stack Overflow discussion关于声明函数的方法及其范围问题。本质上，对于第二种方式(var name = function())，函数不会“提升”到其作用域的顶部，因此我们必须调用在我们将其分配给变量后更新。

希望这对您有所帮助!

PS 在其他讨论中，浏览第一个答案并实际关注 second answer by Eugene .