Javascript 创建可重复使用的转换模板

在D3中，我有一个这样的过渡

this.xAxis
    .transition()
    .ease(d3.easeBackInOut)
    .duration(1000)
    .call(this.xTicks)
    .attr('transform', `translate(0, ${this.height})`);

我在一些地方使用相同的转换

有没有办法把它变成一个函数，或者我可以在一个地方更新它，比如

transition(){
    .transition()
    .ease(d3.easeBackInOut)
    .duration(1000) 
}

this.xAxis
    transition()
    .call(this.xTicks)
    .attr('transform', `translate(0, ${this.height})`);

你可以利用它

只调用指定函数一次，将此转换与任何可选参数一起传递

然后，您可以创建一个传递到

.call（）

的函数，该函数配置传递到该函数的转换对象。您甚至可以提供额外的参数来微调转换的配置。由于

.call

返回调用它的转换，因此这种方法非常适合通常的D3方法链接语法：

function configureTransition(transition) {
  transition
    .ease(d3.easeBackInOut)
    .duration(1000);
}

this.xAxis
  .transition()                // Create a transition on a selection.
  .call(configureTransition)   // Pass the function to configure the transition.
  .call(this.xTicks)
  .attr('transform', `translate(0, ${this.height})`);

---

对于您的问题，最明显的答案是使用转换实例作为转换的名称：

selection.transition([name])

根据

如果名称是转换实例，则返回的转换与指定的转换具有相同的id和名称

然而，同样的API说：

如果所选元素上已存在具有相同id的转换，则将为该元素返回现有转换。否则，返回转换的时间将从每个选定元素最近祖先上相同id的现有转换继承

正因为如此，我认为您不需要命名的转换。因此，我在这里的解决方案只是扩展原型，创建一个函数来获取选择（

this

），并使用所需的方法返回转换：

d3.selection.prototype.transitionTemplate = function() {
  return this.transition()
    .ease(d3.easeBackInOut)
    .duration(1000);
};

下面是一个演示：

d3.selection.prototype.transitionTemplate=function（）{
返回这个.transition（）
.ease（d3.easeBackInOut）
.期限（2000年）；
};
d3.选择（“圆圈”）
.transitionTemplate（）
.attr（“cx”，50）
.attr（“cy”，130）；
d3.选择（“rect”）
.transitionTemplate（）
.attr（“宽度”，100）