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

Question

根据文件transition.tween(),

打电话transition.tween(name, factory)......

为指定的名称注册自定义补间.转换开始时,将为转换中的每个选定元素调用指定的工厂函数,将该元素的数据(d)和索引(i)作为参数传递,并将元素作为context(this).

命名补间的目的是什么？由于.tween需要引用要使用的转换,因此在不同的转换上重用相同的补间似乎不太可能有用.据我所知,这个名字完全没有任何意义.

为了说明我的观点,我最近使用的自定义transition.tween()过渡的text,并path同时单元的组内.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().

题

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

Answer 1

这是一个很好的问题.

我怀疑为什么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.

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

所以在某种意义上,这可能是一个糟糕的设计,图书馆内部的一些内容正在进入API. 但是我认为可能存在这样的情况:您希望能够在中途覆盖补间函数,并且有一个名称是有用的. 正如Lars发现的那样(参见注释),除了调试之外,唯一的实际用途似乎是在转换开始之前的延迟期间覆盖补间工厂函数的能力(如果没有指定更长的延迟,则约为17ms).

它可以设计为可选参数(例如.tween(function, [name])),但这与用于所有其他API函数的模式不一致.

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