transition().each() 在 D3 v3 之后發生變化

Question

我嘗試使用transition.each()創建子過渡，但在each回調中創建的過渡不會從父過渡繼承過渡設置； 以下代碼在 v3 下維護 8000 持續時間，但在 v6 下不維護。

 let dataset = [{ x: 50, y: 50, color: 'red' }, { x: 100, y: 50, color: 'black' }, { x: 100, y: 100, color: 'blue' }, { x: 50, y: 100, color: 'yellow' } ] let svg = d3.select("body").append("p").append("svg").attr("width", 200).attr("height", 200) let circles = svg.selectAll("circle").data(dataset).enter().append("circle").attr("r", 10).attr("cx", d => dx).attr("cy", d => dy).attr("fill", d => d.color) parent_transition = d3.select({}).transition().duration(8000) parent_transition.each(() => { // does not inherit duration circles.transition().attr("cx", (d, i) => dataset[(i + 1) % 4].x).attr("cy", (d, i) => dataset[(i + 1) % 4].y) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

我應該如何在 v6 中做同樣的事情？

Answer 1

這是 4 年多前 D3 v4 發布時有意做出的更改。 根據變更日志：

以這種方式創建的轉換從最近的祖先元素繼承時序，因此即使引用的轉換具有可變時序（例如交錯延遲）也是同步的。 該方法替代了 3.x 中的 transition.each 的神奇行為； 在 4.0 中，transition.each 與 selection.each 相同。 （強調我的）

也就是說，目前尚不清楚您的目標是什么。 一種可能的解決方案是使用命名轉換：

 let dataset = [{ x: 50, y: 50, color: 'red' }, { x: 100, y: 50, color: 'black' }, { x: 100, y: 100, color: 'blue' }, { x: 50, y: 100, color: 'yellow' } ] let svg = d3.select("body").append("p").append("svg").attr("width", 200).attr("height", 200) let circles = svg.selectAll("circle").data(dataset).enter().append("circle").attr("r", 10).attr("cx", d => dx).attr("cy", d => dy).attr("fill", d => d.color) const parent_transition = d3.transition().duration(8000) circles.transition(parent_transition).attr("cx", (d, i) => dataset[(i + 1) % 4].x).attr("cy", (d, i) => dataset[(i + 1) % 4].y);

 <script src="https://d3js.org/d3.v6.min.js"></script>