第二次過渡將不起作用

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);
});

為什么不進行第一次transition ？ 這是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);

在此處完成演示。