根据transition.tween()
的文档,
致电transition.tween(name, factory)
...
为指定的名称注册自定义补间。转换开始时,将为转换中的每个选定元素调用指定的 factory 函数,传递该元素的数据( d )和索引( i < / em>)作为参数,元素作为上下文(
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()
所需的第一个参数。
问题
以后可以引用此名称吗?如果是这样,怎么样?这样的参考存储在哪里?此外,非常感谢在野外使用的任何例子。
答案 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函数的模式不一致。
因此,通常,只需使用名称作为一种方法,通过描述补间函数的作用来使代码更具可读性。除非你痴迷于缩小,否则使用随机的单个字符。