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

Question

这里有一个很棒的 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 之间的根本区别。

Answer 1

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

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

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