Angular 中的 D3 力模拟

Question

我正在尝试在 Angular 应用程序中进行 d3 力模拟。基本上我所拥有的是run 方法，用于初始化和设置模拟选项，ticked 方法在每个刻度上更新模拟。我有几个与此相关的问题。 （JavaScript 版本的代码运行良好）

我的初始代码是

private run() {
  this.simulation = d3.forceSimulation()
  //some code
  this.simulation.on('tick', this.ticked())
}

private ticked() {
  //code
}

这不起作用（模拟不打勾）。但是，如果我像下面这样内联 ticked 方法，它会起作用并且模拟会继续。

private run() {
  this.simulation = d3.forceSimulation()
  //some code
  this.simulation.on('tick', () => {
   //code
  })
}

这有什么具体原因吗？我是 Angular 和 d3 的新手，它可能很简单，就像 JavaScript 的行为方式一样。

第二个问题，之前的代码 sn-p（第二个）工作了几秒钟，然后模拟冻结。控制台中没有错误消息。你能猜到为什么会这样吗？ 我希望这足够详细。如果需要，我可以添加更多详细信息。

Answer 1

您所做的第一次尝试是将返回值从您的方法 'ticked' 传递给事件函数。

事件“on”接收两个参数，第一个是您要绑定的事件，在本例中为“tick”，以及一个在事件返回值时执行的回调函数。您传递的第二个参数是一个值，而不是回调函数。所以它在事件触发之前执行了你的函数。

您可以像这样使用带有回调的函数“打勾”：

this.simulation.on('tick', () => this.ticked());