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

时间:2015-07-23 01:50:07

标签: javascript jquery d3.js svg

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

可以看到该功能here

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

当点击具有特定数据属性的树节点时,屏幕上会附加html form,允许用户添加与该节点相关的数据。用户输入数据,点击“保存”。其中附加了基于jQuery的{​​{1}}处理程序,用于更新数据源。

然后我需要触发树以使用显示新数据的节点进行更新。

我不确定如何从外部函数触发此event函数。我不想每次都重建整个树,只需重新绘制节点以显示新数据。

我对如何做到这一点的理解存在差距?

1 个答案:

答案 0 :(得分:2)

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

快速方法是将其分配给全局update范围:

window

当然,这不是最佳选择,但它确实可以帮助我们缩小您的范围。

如果可行,那么我们只需要声明一个超出window.update = function(source) { ... 范围的变量,然后在line 65内部,将其分配给build: function(tree_data)

update

正如您所注意到的,我们必须移动var externalReferenceToUpdate; [...] build: function(tree_data) { [...] var update = function(source) { [...] }; externalReferenceToUpdate = update; update(root); // moved this due to function expression vs. declaration [...] } 。这是因为我们使用不同的方法“制作”了这个功能。关于声明函数及其范围问题的方法有一个whole other Stack Overflow discussion。基本上使用第二种方式(update(root)),函数“悬挂”到其范围的顶部,因此我们必须在将其分配给a var name = function()之后调用它变量

希望这有帮助!

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