gpt4 book ai didi

javascript - d3 bl.ocks 极地时钟前问题

转载 作者:行者123 更新时间:2023-11-28 00:17:27 24 4
gpt4 key购买 nike

这里有一个很棒的 d3 极地时钟示例 - http://bl.ocks.org/mbostock/1096355 .

我有几个关于幕后情况的问题,如果有人愿意花点时间解释一下。

1.

d3.transition().duration(0).each(tick);

从文档来看,这基本上相当于

d3.select(document).transition().duration(0).each(tick)

那么这应该首先控制文档到 View 的转换吗?我尝试给持续时间一个值> 0,它的作用就像延迟而不是动画任何东西。我尝试向勾选 fn 添加一些内容来控制要查看的动画元素,但它似乎从未对任何内容进行动画处理。一个关于这与仅调用 tick() 有何不同的工作示例将很有用。

2.

function tick() {
field = field
.each(function(d) { this._value = d.value; })
.data(fields)
.each(function(d) { d.previousValue = this._value; });

如果我更好地理解 1.,这可能会更有意义,但我不明白的主要方面是如何使用“this”。 d.value 正在被复制到 this._value。 'this' 是 HTML dom 元素吗?我已经尝试在这行代码的正下方使用 console.log(this) ,但它没有显示任何 _value 属性。对这里发生的事情的解释将不胜感激。尤其是 this 和 d 之间的根本区别。

最佳答案

  1. 在这种情况下,它在功能上等同于简单地调用 tick() (请参阅 modified example )。我可以看到,使用 d3.transition() 的优点是,您可以将转换上的一些元数据与文档元素相关联,而当您只是调用该函数时,情况并非如此。原则上,您可以使用此元数据,例如停止转换,尽管在示例中并未使用它来达到这种效果。

  2. d 指的是绑定(bind)到 field 中的 g 元素的数据,而 this 指的是到实际的 DOM 元素。您在控制台中看不到这一点,因为打印的表达式不是在打印时计算的,而是在展开它时计算的。也就是说,您在检查控制台时看到的内容并不是打印值时的内容。

代码的作用是使用 DOM 元素保存先前的值(这是必要的,因为数据 (d) 是通过调用 .data() 进行更改的>) 能够在不同值之间正确转换(例如,参见 this example 了解需要访问先前值的另一种情况)。

关于javascript - d3 bl.ocks 极地时钟前问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30331563/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com