Javascript 在保留旧元素的同时应用转换'；位置

在这一页上，我有许多相同类的矩形，比如class

one

如何将转换应用于所有这些矩形，以便它们使用新类（可能是class

two

）移动到新位置，但保持这些旧矩形在相同位置固定

如果我解释错了，有人能纠正我吗

例如，我有类为“开始”的矩形

这些矩形坐标是（10,1）、（20,1）、（30,1）

然后我移动它们

d3.selectAll("rect")
  .transition()
  .attr("y", (d, i) => i + 5 * 10); 

它们将出现在新的坐标（10,50）、（20,51）、（30,52）

---

如何使类为

的原始矩形在（10,1）、（20,1）、（30,1）处开始。。。仍然存在，但在（10,50）、（20,51）、（30,52）处有新的矩形。。。使用类
stop
？
时，您不希望将转换应用于现有元素：您希望克隆它们并将转换应用于它们的克隆（或在将转换应用于原始元素之前克隆它们，这是相同的…）

话虽如此，D3有一个非常方便的方法，名为：

在选定元素之后立即插入选定元素的克隆，并返回新添加克隆的选择

因此，假设您的选择命名为
矩形
（建议：始终命名您的选择），而不是这样做

rectangles.transition()
    .attr("class", "stop")
    .attr("y", (d, i) => i + 5 * 10);

…首先克隆它们：

rectangles.each(cloneNodes)
    .transition()
    .attr("class", "stop")
    .attr("y", (d, i) => i + 5 * 10);

function cloneNodes() {
    d3.select(this).clone(false);
}

以下是演示：


const svg=d3.选择（“svg”）；
常量矩形=d3.select（“svg”）
.selectAll（空）
.数据（[10,20,30,40,50]）
.输入（）
.append（“rect”）
.attr（“类”、“开始”）
.attr（“x”，d=>d）
.attr（“y”，1）
.attr（“宽度”，5）
.attr（“高度”，5）；
矩形。每个（克隆节点）
.transition（）
.attr（“类”、“停止”）
.attr（“y”，（d，i）=>i+5*10）；
函数cloneNodes（）{
d3.选择（this）.clone（false）；
}
无需使用每个

和一个克隆函数

rectangles.clone(false)
  .transition()
  .attr("class", "stop")
  .attr("y", (d, i) => i + 5 * 10);

const svg=d3.选择（“svg”）；
常量矩形=d3.select（“svg”）
.selectAll（空）
.数据（[10,20,30,40,50]）
.输入（）
.append（“rect”）
.attr（“类”、“开始”）
.attr（“x”，d=>d）
.attr（“y”，1）
.attr（“宽度”，5）
.attr（“高度”，5）；
矩形。克隆（false）
.transition（）
.attr（“类”、“停止”）
.attr（“y”，（d，i）=>i+5*10）

这个问题很模糊。复制一个
rect
s并制作复制器动画我将更新问题如果我用一个组包装所有矩形并克隆组会怎么样。有没有办法在不丢失矩形的情况下克隆组？@tomc然后使用
groupselection.clone（true）
rectangles.clone(false)
  .transition()
  .attr("class", "stop")
  .attr("y", (d, i) => i + 5 * 10);