Javascript 试图使两个圆同时过渡

尝试让两个圆圈（一个红色，一个蓝色）从相反方向移动到屏幕中心。只能让第二个圆圈来做-不确定为什么

我尝试了各种方法，从改变调用函数的顺序到改变变量名

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，200）；
var circles=svg.append（'circle'）
.attr（'cx'，50.）.attr（'cy'，50.）.attr（'r'，10.）.style（'fill'，'red'）；
var circlesTwo=svg.append（'circle'）
.attr（'cx'，50）.attr（'cy'，50）.attr（'r'，10）.style（'fill'，'blue'）；
动画（）；
动画二（）；
函数动画（）{
svg.transition（）
.持续时间（750）
.tween（“精度”，函数（）{
var面积=d3.插值环（0，300）；
返回函数（t）{
minArea=面积（t）；
render（）；
};
})
}
函数animationTwo（）{
svg.transition（）
.持续时间（750）
.tween（“精度”，函数（）{
var面积=d3.插值环（600300）；
返回函数（t）{
minArea=面积（t）；
renderTwo（）；
};
})
}
函数render（）{
圆。属性（'cx'，米纳雷亚）；
}
函数renderTwo（）{
圆圈2.attr（'cx'，minArea）；
}

---

将转换应用于SVG选择并不是一个非常惯用的D3：您应该将它们应用于正在移动的元素（即圆）。顺便说一句，这就是您面临的问题的原因：一个过渡正在取消另一个过渡

之所以会出现这种情况，是因为您的转换没有名称，所以使用了

null

：

selection.transition（[名称]）

使用指定的名称返回给定选择的新转换。如果未指定名称，则使用null

然后，因为它们都有相同的名称（

null

），最后一个将取消第一个：

开始转换还取消在开始转换之前创建的同一元素上具有相同名称的任何挂起转换

因此，要将多个转换应用于同一元素，必须将其命名为：

function animation() {
    svg.transition("foo")
    //etc...
}

function animationTwo() {
    svg.transition("bar")
    //etc...
}

以下是更改后的代码：

var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，600）
.attr（“高度”，300）；
var circles=svg.append（'circle'）
.attr（'cx'，50）.attr（'cy'，50）.attr（'r'，10）.style（'fill'，'red'）；
var circlesTwo=svg.append（'circle'）
.attr（'cx'，50）.attr（'cy'，50）.attr（'r'，10）.style（'fill'，'blue'）；
动画（）；
动画二（）；
函数动画（）{
svg.transition（“foo”）
.持续时间（750）
.tween（“精度”，函数（）{
var面积=d3.插值环（0，300）；
返回函数（t）{
minArea=面积（t）；
render（）；
};
})
}
函数animationTwo（）{
svg.transition（“条”）
.持续时间（750）
.tween（“精度”，函数（）{
var面积=d3.插值环（600300）；
返回函数（t）{
minArea=面积（t）；
renderTwo（）；
};
})
}
函数render（）{
圆。属性（'cx'，米纳雷亚）；
}
函数renderTwo（）{
圆圈2.attr（'cx'，minArea）；
}