d3:在transition.tween()中使用* name *参数

时间:2014-07-28 19:03:17

标签: d3.js transition

根据transition.tween()的文档,

致电transition.tween(name, factory) ...

  

为指定的名称注册自定义补间。转换开始时,将为转换中的每个选定元素调用指定的 factory 函数,传递该元素的数据( d )和索引( i < / em>)作为参数,元素作为上下文(this)。

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

为了说明我的观点,我最近使用自定义transition.tween()同时转换组内的textpath元素。 HERE是该示例的链接。相关代码是:

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);});
    };
  });
}

除了注册补间函数外,从不使用该名称,但必须给出该名称,因为它是.tween()所需的第一个参数。

问题

以后可以引用此名称吗?如果是这样,怎么样?这样的参考存储在哪里?此外,非常感谢在野外使用的任何例子。

1 个答案:

答案 0 :(得分:6)

这是一个很好的问题。

怀疑name参数存在的快速答案是,所有其他过渡补间都与某种名称相关联(例如属性或属性)风格),方便他们以同样的方式工作。

该名称用于后台,在每个元素上设置的补间对象中。如果创建足够长的转换,则可以使用DOM检查器查看每个元素的更改DOM属性。将会有一个名为__transition__的东西,它存储一个数组,其中包含有关元素和任何预定子转换的活动转换的信息。

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

这些补间函数按名称存储在该转换信息对象中,并使用您提供的名称存储自定义补间。这意味着设置名称的一个真正效果是,如果在同一转换中使用相同的名称两次,则会覆盖第一个版本:

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;
         }
     };
  });

第二个color样式转换调用取消了前一个调用,第二个countdown补间同样取消了第一个style.color样式转换调用。只打印出两个补间函数,一个名为countdown,一个名为.tween(function, [name])

现在,我还没有做过详尽的测试,但似乎就是这样。

所以从某种意义上说,这可能是一个糟糕的设计,一些内部的内部胆量进入API。 但是我想可能会出现这样的情况,你希望能够在中途覆盖补间函数,并且有一个名字很有用。正如Lars发现的那样(见评论),唯一实用的除了调试之外,使用似乎是在转换开始之前的延迟期间覆盖补间工厂函数的能力(如果你没有指定更长的延迟,则大约17ms)。

可以设计为可选参数(例如{{1}}),但这与用于所有其他API函数的模式不一致。

因此,通常,只需使用名称作为一种方法,通过描述补间函数的作用来使代码更具可读性。除非你痴迷于缩小,否则使用随机的单个字符。