這里的問題是關于transition.each: 你不能用它來包裝幾個transition.attr或transition.style方法的誤解。事實上，它僅用于對該轉換中的每個元素調用任意代碼，就像selection.each.
因此，當你做...
.each (function (d, i) {
// complicated stuff with d I don't want to do twice
d3.select(this)
.attr("x", ((zz+i)%4) *20)
.attr("y", ((zz+i)%4) *40)
})
...您只需更改 DOM 元素中的屬性，該元素將立即跳轉到新的x位置y，如預期的那樣。換句話說，d3.select(this).attr(...您的代碼中的那個是一個selection.attr，而不是一個transition.attr.
您有多種選擇（用于避免冗余的復雜計算）。如果你想堅持使用transition.each，你可以用它來創建一個新的局部變量，或者一個新的屬性。為此，我們需要將對象作為數組中的數據元素，然后我們照常使用transition.attr：
.each(function(d, i) {
d.complexValue = ((zz + i) % 4) * 20;
})
.attr("x", function(d) {
return d.complexValue;
})
//etc...
這是一個演示：
const sel = d3.select("svg")
.selectAll(null)
.data([{
color: "red"
}, {
color: "blue"
}, {
color: "green"
}, {
color: "yellow"
}])
.enter()
.append("rect")
.attr("width", 30)
.attr("height", 30)
.attr("x", function(d, i) {
return i * 20;
})
.attr("y", function(d, i) {
return i * 40;
})
.style("fill", function(d) {
return d.color;
});
let zz = 0;
function each() {
zz++;
d3.selectAll("rect")
.transition()
.duration(1000)
.each(function(d, i) {
d.complexValue = ((zz + i) % 4) * 20;
})
.attr("x", function(d) {
return d.complexValue;
})
.attr("y", function(d) {
return d.complexValue;
})
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="demo"><svg width="360px"></svg></div>
<button onclick="each()">In an Each</button>
