d3 中的 Transition.each 不插入屬性

Question

我在這里遺漏了一些我的理解而不是我認為的錯誤......

在 d3 中，我試圖在轉換中更新多個屬性值。 使用多個transition.attr聲明工作正常。 但我想使用.each因為在現實世界中我有一個很大的計算，我不想做兩次或更多...我嘗試使用transition.each但屬性值不插值。

難道是d3.select內的each ？ 我試過d3.active但這沒有做任何事情。

（有一個https://github.com/d3/d3-selection-multi庫提供的.attrs可以很好地運行到 v5，但不適用於新的 v6 ......）

請參閱https://jsfiddle.net/f679a4yj/3/ - 我可以做些什么來獲得動畫，但通過.each ，我沒有得到什么？

Answer 1

這里的問題是對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>