什么是Javascript中的“ TimeEvent”对象？它有什么方法和属性？

Question

我正在使用反应时间序列图。其中，ScatterChart组件具有一个名为radius的道具，该道具可以接受函数。

该函数有两个参数。 Event类型的TimeEvent和column类型的String。

虽然column很容易理解，但我不知道TimeEvent是由什么制成的。它有什么方法？它有什么特性？如何使用它来设置ScatterChart的半径和样式？

该文档也确实很差，我无法在其使用的TimeEvent库中找到有关pondjs对象的任何信息。

作为前端开发人员，当文档不可用时，如何确定不同库使用的不同对象？现在，我正在使用Chrome的开发工具，在其中我可以看到

我不知道该如何处理这张图片。我还能做什么以获取更多信息？

Answer 1

在Chrome的开发工具中可以检查的浏览器TimeEvent是由begin，repeat和end上的SVG动画触发的事件类。让我们以MDN SVG动画示例为例，并添加一些事件侦听器。

let svg = document.querySelector('animate');

svg.addEventListener('begin' , ev => console.log('begin animation: class' , ev.constructor.name));
svg.addEventListener('repeat', ev => console.log('repeat animation: class', ev.constructor.name));
svg.addEventListener('end'   , ev => console.log('end animation: class'   , ev.constructor.name));

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL -->

<svg width="300" height="100">
    <title>Attribute Animation with SMIL</title>
    <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
    <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
      <animate
        attributeName="cx" from="0" to="100"
        dur="5s" repeatCount="3" />
    </circle>
  </svg>

Answer 2

TimeEvent是您正在使用的pond.js库提供的数据结构：https://www.npmjs.com/package/pondjs#what-does-it-do

您可以找到其源代码here。