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

完整演示here。

第二次转型不起作用

1 个答案: