Question

我正在学习使用D3.js来获取我的一些可视化想法，而且我正在遇到一些可能很简单的东西，也许只是一个javascript的东西。

我想从另一个函数中调用一个函数。我创建了一个基本的散点图，并希望用新的数据点重新加载它。这是JSFiddle。我真的很难过！

我认为它是最简单的形式，它看起来像这样：

function firstFunction() {
    var something;
}

function secondFunction() {
    firstFunction();
}

但它似乎有时无法工作，也无法弄清楚原因。

Answer 1

正在发生的事情是，在jsfiddle中，默认是将所有内容封装在窗口加载的函数中。代码如下所示：window.onload=function(){your stuff}

当您尝试设置onload时，代码结构的结构如下：

function firstFunction(){
    function secondFunction(){
        do stuff
    }
}

onload = secondFunction;

问题是secondFunction无法在firstFunction范围之外访问。这称为变量作用域，如果没有它，编码会很糟糕。

解决此问题的方法是将您的onload分配移动到javascript块。我建议使用内置的d3方式执行此操作：d3.select('button').on('click',newScatter);这里我选择按钮并添加单击事件处理程序。这是有效的，因为只有一个按钮，但最好给按钮一个类或id，并在d3.select()中使用它。

如果你这样做，你的代码仍然无效，但那是因为你删除了应该包含newScatter()中散点图的SVG元素（这一行：elem.parentNode.removeChild(elem);）。但是，该按钮将成功执行您要求它执行的操作并删除散点图。

我已经创建了你的小提琴here.

的工作版本

使用D3在另一个内部调用javascript函数时出现问题

1 个答案: