D3 block .ocks极地时钟

d3 bl.ocks polar clock ex questions

本文关键字：时钟 ocks block D3      更新时间：2023-09-26

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

我有几个问题要问，到底是怎么回事，如果有人愿意花点时间解释一下的话。

1。

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

从文档来看，这实际上相当于

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

那么这是否应该控制文档到视图的过渡呢?我试过给持续时间一个值> 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，这可能更有意义。然而，我不明白的主要方面是"this"是如何被使用的。D.value被复制到this._value。'this'是HTML dom元素吗?我已经尝试了console.log(this)直接在这行代码下面，它没有显示任何_value属性。我希望你能解释一下这是怎么回事。这和d之间的根本区别

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

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

代码所做的是用DOM元素保存前一个值(这是必要的，因为数据(d)正在通过调用.data()进行更改)，以便能够在不同的值之间正确地转换(参见例如本例中需要访问前一个值的另一种情况)。

相关文章：