Question

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

如果有人愿意花点时间解释一下，我会对引擎盖下发生的事情提出几个问题。

1

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

从文档中，这基本上等同于

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

那么这应该最初控制文档到视图的转换吗？我已经尝试给持续时间一个值＆gt; 0，它就像延迟而不是动画任何东西。我已经尝试在tick fn中添加一些内容来控制要查看的动画元素，但它似乎永远不会动画。一个有关如何与调用tick（）不同的工作示例将非常有用。

2

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

如果我理解，这可能更有意义1.然而，我不理解的主要方面是如何利用'这个'。 d.value正被复制到this._value。 'this'是HTML dom元素？我在这行代码的正下方尝试了一个console.log（this），它没有显示任何_value属性。对此处发生的事情的解释将不胜感激。特别是这与d之间的根本区别。

Answer 1

在这种情况下，它在功能上等同于简单地调用tick()（请参阅modified example）。使用d3.transition()我可以看到的优点是，您将转换中的某些元数据与文档元素相关联，而当您只是调用该函数时则不然。原则上，您可以将此元数据用于例如停止转换，虽然在示例中没有使用该转换。
d是指绑定到g中field个元素的数据，而this是指实际的DOM元素。您无法在控制台中看到这一点，因为打印时不会评估打印的表达式，而是在展开时评估。也就是说，当您检查控制台时，您所看到的内容并不是打印价值时的内容。

代码所做的是使用DOM元素保存前一个值（这是必要的，因为通过调用d来更改数据（.data()）以便能够在之间正确转换不同的值（例如，对于需要访问先前值的另一种情况，请参见this example。）

d3 bl.ocks极钟前问题

1 个答案: