获取给定元素的活动(运行)D3 v3转换的标准方法是什么？

Question

D3的抽象仍然让我的思绪弯曲,所以希望我能正确地呈现这一点.

在D3 版本3中,给定一个元素(比如一个圆圈),并且只给出一个可能在每个元素上运行的转换,确定该元素当前运行转换的最佳方法是什么,如果有的话？

我知道我可以手动检查__transition__元素(虽然也有欢迎帮助),但我真的希望有更高级别的东西.

我在这里的更大目标是创建一个子转换if-only-only-if如果有转换到sub.否则,我将创建一个新的过渡.

Answer 1

简而言之，没有标准的方法可以实现转换，而且您不应该这样做。如，它不受支持。

稍微长一点的答案是，出于您的目的，您可能可以使用 来破解它__transition__。这个想法是检查是否__transition__存在，如果存在，则等到不存在后再开始新的（子）转换。

为此，它有助于使用适当的函数扩展选择原型：

d3.selection.prototype.getTransition = function() {
  if(this[0][0].__transition__) {
    return this[0][0].__transition__[1];
  } else return undefined;
}

请注意，这里的做法非常麻烦，并且仅当选择中恰好有一个元素具有一个转换时才有效。不过你应该明白了。

现在，我们可以使用此函数来确定转换是否正在运行。

if(sel.getTransition() !== undefined) {
  // transition is there
} else {
  // no transition
}

不幸的是，__transition__不允许您重建过渡对象，即以下内容不起作用。

sel.getTransition().transition()...

因此，要模拟在当前运行的子转换完成后启动的子转换，请使用setTimeout检查是否有某些内容正在运行，一旦没有运行，就开始新的转换：

function check() {
  if(sel.getTransition() !== undefined) {
    setTimeout(check, 100);
  } else {
    sel.transition().duration(1000)...;
  }
}
check();

您可以缩短检查之间的间隔（此处为 100 毫秒），以便更好地了解紧随前一检查之后的转换。

完整的例子在这里。请注意，在几乎所有情况下，在某处保留对过渡对象的引用并使用它会更容易、更好。这个例子实际上只是作为一个简单的概念证明。