有多种方法可以实现这一目标。正如另一个答案中所述，为此使用函数将使您的代码保持紧凑。就我个人而言，我倾向于使用转换的结束事件来触发转换函数中的下一个转换。
此类函数的一般形式如下：
function transition() {
// .... optional logic here.
d3.select(this) // do transition:
.transition()
.attr("fill", ... )
.on("end", transition); // and repeat.
}
可以用以下方式调用selection.each(transition)
管理循环中当前颜色/过渡的一种方法是使用自定义属性。下面我用的是.attr("i")跟踪：
var data = [
["orange","purple","blue","yellow"],
["blue","yellow","orange","purple"]
];
var svg = d3.select("svg");
var circles = svg.selectAll()
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.attr("cx", function(d,i) { return i * 50 + 50; })
.attr("cy", 50)
.attr("fill", function(d) { return d[0]; })
.attr("i",0)
.each(transition);
// cycle endlessly:
function transition() {
var selection = d3.select(this);
// keep track of current value:
var i = selection.attr("i")
selection
.attr("i",i = ++i%4)
.transition()
.duration(1000)
.attr("fill", function(d) { return d[i] })
.on("end", transition);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
如果您的转换仅顺序（起点）不同，您可以稍微修改上述方法：
var data = [50,75,100,125,150,175,200,225];
var colors = ["orange","purple","blue","yellow"];
var svg = d3.select("svg");
var circles = svg.selectAll()
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.attr("cx", function(d) { return d; })
.attr("cy", 50)
.attr("fill", function(d,i) { return colors[i%4]; }) // set start fill
.attr("i", function(d,i) { return i%4; }) // record start position.
.each(transition);
function transition() {
var selection = d3.select(this);
var i = selection.attr("i");
i = ++i%colors.length;
selection.transition()
.duration(1000)
.attr("i",i)
.attr("fill", colors[i])
.on("end", transition);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
第一个我使用颜色集作为基准，第二个我只是使用位置来访问颜色i属性
上述方法使用自定义属性，但我们也可以使用数据。这让我们在某些方面对 D3 有了更多的熟悉。
例如，我们可以有一个名为“颜色”和“增量”的属性，同时设置每个过渡的填充（再次假设我们有一个颜色数组，并且每个圆圈从其上的不同点开始）：
function transition() {
d3.select(this).transition()
.duration(1000)
.attr("fill", function(d) { return colors[++d.color%colors.length]; })
.on("end", transition);
}
var data = d3.range(8).map(function(d) { return {x: d*25+50}; })
var colors = ["orange","purple","blue","yellow"];
var svg = d3.select("svg");
var circles = svg.selectAll()
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.attr("cx", function(d) { return d.x; })
.attr("cy", 50)
.attr("fill", function(d,i) { return colors[i%4]; }) // set start fill
.each(function(d,i) { d.color = i%4; }) // record start position.
.each(transition);
function transition() {
d3.select(this).transition()
.duration(1000)
.attr("fill", function(d) { return colors[++d.color%colors.length]; })
.on("end", transition);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
如果您希望过渡重复 x 次，或者甚至让所有结束都使用相同的颜色，我们也可以通过向数据添加新属性来跟踪完成的周期来相当轻松地做到这一点：
var data = d3.range(8).map(function(d) { return {x: d*25+50}; })
var colors = ["orange","purple","blue","yellow"];
var svg = d3.select("svg");
var circles = svg.selectAll()
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.attr("cx", function(d) { return d.x; })
.attr("cy", 50)
.attr("fill", function(d,i) { return colors[i%4]; }) // set start fill
.each(function(d,i) { d.color = d.start = i%4; }) // record start position.
.each(transition);
var n = 8; // n cycles
function transition() {
d3.select(this).transition()
.duration(1000)
.attr("fill", function(d) { return colors[++d.color%colors.length]; })
.on("end", function(d) { if(d.color - d.start < n) transition.apply(this); else return null; });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
有一些更懒的方法可以破坏性地修改数据（或其部分），例如在此转换周期中使用只能运行一次的移位：
var data = [
["orange","purple","blue","yellow"],
["blue","yellow","orange","purple"]
];
var svg = d3.select("svg");
var circles = svg.selectAll()
.data(data)
.enter()
.append("circle")
.attr("r", 20)
.attr("cx", function(d,i) { return i * 50 + 50; })
.attr("cy", 50)
.attr("fill", function(d) { return d.shift(); })
.each(transition);
function transition() {
var selection = d3.select(this);
if(selection.datum().length) {
selection.transition()
.duration(1000)
.attr("fill", function(d) { return d.shift() })
.on("end", transition);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
您可能会发现我的代码片段都没有使用子选择器：这可以通过自定义属性、数据属性或更简单地使用来避免.attr("fill",function(d,i){在转换本身中区分奇数和偶数元素。不过，我并不反对这些选择器，它只是需要进行额外的选择。
