d3：在transition.tween（）中使用* name *参数 [英] d3: Use of the *name* argument in transition.tween()

问题描述

根据 transition.tween（）的文档， ，

调用 transition.tween（name，factory） ...

为指定的名称注册自定义补间。当转换开始时，将为转换中的每个选定元素调用指定的 factory 函数，该元素的数据（ d ）和索引（ i ）作为参数，以元素作为上下文（ this ）。

使用命名补间的目的是什么？由于 .tween 需要引用要使用的转换，似乎不太可能在不同转换中重用相同的补间。就我所知，这个名字根本没有目的。

为了说明我的观点，我最近使用了一个自定义的 transition.tween ）同时转换组中的文本和路径元素。 此处 是示例的链接。相关代码是：

  function groupTween（transition，newAngle）{
 transition.tween（thisNameMeansNothing，function （）{
 var d = d3.select（this）.datum（）; 
 var interpolate = d3.interpolate（d.endAngle，newAngle）; 
 return function（t）{
 d.endAngle = interpolate（t）; 
 d3.select（this）.select（path）
 .attr（d，arc）; 
 d3.select （this）.select（text）
 .attr（transform，function（d）{returntranslate（+ arc.centroid（d）+）;}）
。 text（function（d）{return formatLabel（d.endAngle）;}）; 
}; 
}）; 
} 
  

除非注册补间函数，否则不会使用该名称，因为它是 .tween（）的必需的第一个参数。

问题 / p>

以后可以引用这个名称吗？如果是，如何？这样的引用存储在哪里？

解决方案

这是一个很好的问题。

我可疑，快速回答为什么 name 参数存在，其他转移补间与某种类型的名称（例如，属性或样式）相关联，并且它们都方便地以相同的方式工作。

name在后台使用，在每个元素上设置的补间对象中。如果创建一个足够长的转换，您可以使用DOM检查器查看每个元素的更改的DOM属性。将有一个称为 __ transition __ 的东西，它存储一个数组，其中包含有关元素上的活动转移的信息以及任何调度的子过渡。

转换信息对象不与您在代码中创建的转换选择相同。相反，它包含计算该特定元素的转换所需的特定细节：开始时间，持续时间和将用于为该元素生成补间的特定补间工厂函数。对于您的自定义补间，这是您的函数（d，i），将返回 function（t）有所有标准转换方法创建的类似函数。

这些补间函数按名称存储在转换信息对象中，您的自定义补间存储使用名称给它。这意味着设置名称的一个真正的效果是，如果您在同一转换中使用相同的名称两次，您将覆盖第一个版本：

< a href =http://fiddle.jshell.net/9gPrY/ =nofollow> http://fiddle.jshell.net/9gPrY/

  pTrans 
 .style（color，red）
 .style（color，green）
 .tween （'countdown'，function（d，i）{
 var check; 
 return function（t）{
 this.textContent = percent（t）; 
 if &&" 0.1）{
 console.log（that was not be happen）; 
 check = true; 
} 
}; 
}）
 .tween（countdown，function（d，i）{
 var check; 
 return function（t）{
 this.textContent = percent ）; 
 if（！check&& t> 0.1）{
 printTweens（）; 
 check = true; 
} 
}; 
}）; 
  

第二个颜色样式转换调用取消前一个，而第二个 countdown tween同样取消了第一个。只打印了两个补间函数，一个是 style.color ，另一个是 countdown 。

现在，我没有做详尽的测试，但似乎是这样。

所以在某种意义上说，这可能是一个穷人设计，有点图书馆的内部胆量戳入API。 但我想有一些情况下，你会希望能够覆盖一个补间函数中途通过，并有一个名称是有用的。正如Lars发现（见评论），唯一可行的使用，除了调试，似乎是在过渡开始之前的延迟期间覆盖补间工厂函数的能力（如果你没有指定更长的延迟，约17ms）。

It 可以设计为可选参数（例如， .tween（function，[name]）），但这将是不一致的与所有其他API函数使用的模式。

因此，一般来说，只需使用名称作为一种方式，通过描述你的补间函数是的。除非你痴迷于缩小，在这种情况下使用一个随机的单个字符。

According to the documentation for transition.tween(),

calling transition.tween(name, factory)...

Registers a custom tween for the specified name. When the transition starts, the specified factory function will be invoked for each selected element in the transition, being passed that element's data (d) and index (i) as arguments, with the element as the context (this).

What is the purpose of having a named tween? Since .tween needs a reference to a transition to be used, it seems unlikely that it would be useful for reusing the same tween on different transitions. As far as I can tell, this name has no purpose at all.

To illustrate my point, I recently used a custom transition.tween() to transition the text and path elements within a group simultaneously. HERE is a link to the example. The relevant code is:

function groupTween(transition, newAngle) {
  transition.tween("thisNameMeansNothing", function() {
    var d = d3.select(this).datum();
    var interpolate = d3.interpolate(d.endAngle, newAngle);
    return function(t) {
      d.endAngle = interpolate(t);
      d3.select(this).select("path")
        .attr("d", arc);
      d3.select(this).select("text")
        .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
        .text(function(d) {return formatLabel(d.endAngle);});
    };
  });
}

The name is never used except in registering the tween function, but must be given as it is a required first argument to .tween().

Question

Can this name be referenced later? If so, how? Where is such a reference stored? Also, any examples of this being used in the wild would be greatly appreciated.

解决方案

This is a great question.

I suspect that the quick answer for why the name parameter exists at all, is that all the other transition tweens are associated with some sort of name (e.g., of an attribute or style), and it was convenient for them to all work the same way.

The name is used in the background, in the tween objects that are set on each element. If you create a long enough transition, you can use your DOM inspector to see the changing DOM properties of each element. There will be something called __transition__ which stores an array with the information about the active transition on the element and any scheduled sub-transitions.

That transition information object is not the same as the transition selection that you create in your code. Instead, it contains the specific details required to calculate the transition for that particular element: the start time, duration, and the specific tween factory function that will be used to generate the tween for that element. For your custom tween, this is your function(d,i) that will return the function(t), but there are similar functions created by all the standard transition methods.

Those tween functions are stored in that transition information object by name, and your custom tween is stored using the name you give it. Which means the one real effect of setting a name is that if you use the same name twice on the same transition, you'll over-write the first version:

http://fiddle.jshell.net/9gPrY/

pTrans
  .style("color", "red")
  .style("color", "green") 
  .tween("countdown", function(d,i){
     var check;
     return function(t){
         this.textContent = percent(t);
         if (!check && t > 0.1) {
             console.log("That wasn't supposed to happen");
             check = true;
         }
     };
  }) 
  .tween("countdown", function(d,i){
    var check;
     return function(t){
         this.textContent = percent(t);
         if (!check && t > 0.1) {
             printTweens();
             check = true;
         }
     };
  });

The second color style transition call cancels out the previous one, and the second countdown tween likewise cancels out the first. Only two tween functions are printed out, one called style.color and one called countdown.

Now, I haven't done exhaustive testing, but that seems to be it.

So in a sense maybe this is a poor design, a bit of the internal guts of the library poking out into the API. But I suppose there could be cases where you would want to be able to over-write a tween function partway through, and having a name is useful. As Lars has discovered (see comments), the only practical use, beyond debugging, seems to be the ability to overwrite a tween factory function during the delay before a transition starts (approx 17ms if you haven't specified a longer delay).

It could have been designed as an optional parameter (e.g., .tween(function, [name])), but that would be inconsistent with the pattern used for all the other API functions.

So, in general, just use the name as a way to make your code more readable by describing what your tween function does. Unless you're obsessed with minification, in which case use a random single character.

这篇关于d3：在transition.tween（）中使用* name *参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！