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

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); 在这里，我选择按钮并添加一个click事件处理程序。 之所以d3.select() ，是因为只有一个按钮，但是最好给按钮一个类或id并在d3.select()使用它。

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

我在这里创建了您的提琴的工作版本。