时间戳

首页 > 解决方案 > Angular 中的 D3 力模拟

javascript - Angular 中的 D3 力模拟

问题描述

我正在尝试在 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 的行为方式一样。

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

标签： javascriptangulard3.js

解决方案

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

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

您可以使用带有回调的函数“打勾”，如下所示：

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

推荐阅读