我试图创建一个D3力图表中的“通用”类。当graphTick()
函数被调用(或任何其他方法似乎...)类的成员值undefined
好像方法不绑定到该实例。
我不知道如果我误解写一个类(我从C ++背景是),或者如果我滥用D3框架的JS方式。也许两者兼而有之?
我试图取代....
simulation.on("tick", this.graphTick)
...通过:
simulation.on("tick", function(){
/*graphTick implementation*/
})
但后来它看上去就像是从D3一些匿名对象调用,所以我想我的问题很可能是更多关于JS语法。
有一个Codepen设置这个类和快速测试:https://codepen.io/mrelemental/pen/VGLNLa
您使用的是JavaScript类,这是在D3代码非常罕见。有一个在使用类本身没有问题,但你必须与this
关键字时务请格外小心。
在你的代码的问题是,this
函数内部graphTick
的价值:在"tick"
听众,this
是仿真本身。按照API:
如果调度了指定的事件,每个侦听将与作为模拟的
this
上下文中调用。
你可以很容易地看到它自己,如果你做的函数内部console.log(this)
。你会得到:
{tick: function, restart: function, stop: function, nodes: function, etc...}
这解释了为什么你都尝试没有成功:在两人面前,this
是仿真本身。
解决方法很简单,只需传递正确的this
到graphTick
功能:
simulation.on("tick", this.graphTick.bind(this))
在这里,你可以找到有关bind()
的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind