如何在'加载'D3中的事件

How to call a function on 'load' event in D3?

本文关键字:事件 D3 加载      更新时间:2023-09-26

对我缺乏Javascript经验表示歉意。我是一个JavaScript和D3的新手,试图改编Mike Dewar的《D3入门》一书中的地铁等待评估示例。

如前所述,示例加载时没有绘制任何地铁线路——您必须单击其中一条来绘制它。我认为更改代码很简单,这样当可视化启动时,默认情况下就已经绘制了其中一条线路(如"A"线)。

我可以通过复制和粘贴杜瓦脚本中get_timeseries_data函数内部的部分代码来实现这一点(该函数进行一些检查并调用draw_timeseries函数)。但这似乎是错误的。编写函数的目的是,我应该能够直接调用get_timeseries_data本身,不是吗?

由于杜瓦在那里的最后一个代码块使用了selection.on('click'),所以模仿它似乎是合乎逻辑的,但使用.on('load'):

d3.select('#Line_A_key')
  .on('load', get_timeseries_data);

将其添加到脚本末尾是无效的。它甚至没有在控制台中给出错误,所以我想"加载"事件永远不会发生——为什么?

所以我想也许我可以直接调用get_timeseries_data函数,而不必等待"加载"事件:

d3.select('#Line_A_key')
  .get_timeseries_data();

但这会抱怨对象没有方法"get_timeseries_data"。好吧,这是真的,但引出了一个问题——何时可以调用D3中的函数?

D3(或者是JS的全部?)似乎在某些情况下需要一个以数据和索引为参数的函数。我该如何了解这些情况?如果我已经有了这种形式的函数,我是否也可以在这些情况之外调用它,或者我是否需要为其他情况编写一个全新的函数?

从浏览D3 API,或从几个在线教程中的任何一个,我都无法回答这些问题,最不幸的是,从杜瓦的书中也没有。我应该去哪里看看?

#Line_A_key可能无法加载。所以你不能选择它…

d3.select(window).on("load", get_timeseries_data);