Question

我正在尝试为D3力图创建一个“通用”类。当调用graphTick()函数（或其他方法……）时，该类的成员值为undefined，就好像该方法未绑定到该实例一样。

我想知道我是否误解了JS编写类的方式（我来自C ++背景）还是误用了D3框架。也许两者都是？

我试图替换。...

simulation.on("tick", this.graphTick)

...作者：

simulation.on("tick", function(){ 
    /*graphTick implementation*/ 
})

但是随后它看起来像是被D3中的一个无义对象调用的，所以我认为我的问题可能与JS语法有关。

为此类提供了Codepen设置并进行了快速测试：https://codepen.io/mrelemental/pen/VGLNLa

Answer 1

您正在使用JavaScript类，这在D3代码中非常少见。使用类本身没有问题，但是在处理this关键字时，您必须格外小心。

代码中的问题是this函数中graphTick的值：在"tick"侦听器中，this是模拟本身。根据{{3}}：

调度了指定事件后，将使用this上下文作为模拟来调用每个侦听器。

如果在函数内执行console.log(this)，则可以轻松地自己查看它。您会得到：

{tick: function, restart: function, stop: function, nodes: function, etc...}

这说明了为什么您的两次尝试都无效的原因：在两者中，this都是模拟本身。

解决方案很简单，只需将正确的this传递给graphTick函数即可：

simulation.on("tick", this.graphTick.bind(this))

在这里您可以找到有关bind()的更多信息：API