javascript - 第二次转换不起作用

Question

我一天前开始浏览d3.js。我有一小段代码，当单击 svg 矩形元素时运行。在此代码片段中，唯一的第二个转换起作用，第一个转换不起作用。

var body = d3.select("body");

var colors = ["blue", "darkblue", "black", "red", "green"]

var svg = body.append("svg")
    .attr("width", 500)
    .attr("height", 400)

var rect = svg.append("rect")
    .attr("x", 10)
    .attr("y", 10)
    .attr("width", 100)
    .attr("height", 100);

rect.on("click", function () {
    rect.transition()
        .style("fill", colors[Math.floor((Math.random() * 10) / 2)])
        .attr("x", 400)
        .ease("elastic")
        .duration(1500);

    rect.transition()
        .style("fill", colors[Math.floor((Math.random() * 10) / 2)])
        .attr("y", 300)
        .ease("elastic")
        .duration(1500);
});

为什么它没有首先运行转换？这是JSFIDDLE LINK .

Answer 1

通过在两个单独的代码中设置转换，您可以在第一个代码有机会运行之前用第二个代码覆盖第一个代码。要在一个转换完成后添加另一个转换，只需在同一代码块中再次执行 .transition() 即可:

rect.transition()
    .style("fill", colors[Math.floor((Math.random() * 10) / 2)])
    .attr("x", 400)
    .ease("elastic")
    .duration(1500)
    .transition()
    .style("fill", colors[Math.floor((Math.random() * 10) / 2)])
    .attr("y", 300)
    .ease("elastic")
    .duration(1500);

完整演示 here .