Question

我已经坚持了一段时间。我有一系列像这样的矩形：

我希望逐步改变每个三角形的颜色，所以第一个会改变颜色，暂停，然后是第二个，另一个暂停，然后是第三个等等。这对于改变单个颜色来说很好。然而，当我的方法终止时，矩形的所有填充仍然是颜色，它被改变为如此：

有没有办法将我的矩形逐渐变为橙色，然后在延迟一段时间后再恢复为蓝色？所以过渡应该是这样的：

，暂停n秒，然后

，暂停

这是我的一次尝试：

        var x = ["a", "f", "t", "q", "g", "y", "p"];
        var w = (x.length + 1) * 50;
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)

            for (var i = 0; i < x.length; i++ ) {
                //This successfully changes all the rect into orange ones
                svg.select("#rect" + i)
                   .data([i])   
                   .transition()
                   .delay(i * 1000) 
                   .attr("x", (i * 45) + 45)
                   .attr("y", "0px")
                   .attr("width", "40px")
                   .attr("height", "40px")
                   .attr("fill", "rgb(255, 116, 56)");   

                //I was hoping this would revert each rect to the blue colour, this did not work                           
                svg.select("#rect" + i-1)
                   .data([i-1]) 
                   .transition()
                   .delay(i* 2500) 
                   .attr("x", ((i-1) * 45) + 45)
                   .attr("y", "0px")
                   .attr("width", "40px")
                   .attr("height", "40px")
                   .attr("fill", "rgb(0, 0, 50)");

            }

谢谢！

Answer 1

您的示例代码并未按照预期的方式使用D3。您尝试应用命令式编程方法，其中D3旨在支持更具声明性的方法。关键是你要利用数据连接框架和d3提供的声明式样式/转换。

请查看此示例http://jsfiddle.net/reblace/YbMmQ/，然后按照本教程http://bl.ocks.org/mbostock/3808234查看此其他方法是否更有意义。

在小提琴中，有一种更新方法将选定的矩形连接到数据数组，并指定D3在添加和更新时应如何处理数组元素。对于此示例，在添加中我们指定其位置和蓝色的默认颜色。在更新时，我们只需要更改颜色。在更新功能之外，我们更改“选定”矩形，每次调用更新时，矩形的颜色都会更改，以使选定的矩形为橙色。此更改的持续时间为500毫秒，因此每当矩形的颜色从蓝色 - >橙色或橙色 - >蓝色变为蓝色时，转换将在500毫秒内平稳地进行。

如果你知道什么都不会被添加到数据数组中，你可以在更新块之外移动代码的“// Enter”部分，这样它只会被调用一次。对于此示例，它将支持向数据数组添加元素，但不会删除它们，因为没有定义“exit（）”行为。

function update(data) {
    var rect = svg.selectAll("rect").data(x);

    //Update
    rect
        .transition()
        .duration(500)
            .attr("fill", function(d, i) { return (i === selected)? "rgb(255, 116, 56)" : "rgb(0, 0, 50)"; });

    //Enter
    rect.enter().append("rect")
        .attr("x", function(d, i) { return (i * 45); })
        .attr("y", "0px")
        .attr("width", "40px")
        .attr("height", "40px")
        .attr("fill", "rgb(0, 0, 50)");
}

您的代码的具体问题与以下事实有关：您手动迭代数据数组，选择要操作的dom元素，并将基于持续时间的转换应用于这些元素。这就是你如何使用像jQuery这样的框架。看起来你的转换持续时间与延迟相混淆，所以你实际做的是循环遍历数组中的所有元素并将颜色更改为橙色然后立即返回蓝色，转换从来没有真正有时间动画变化

无论如何，就像我说的那样查看我提供的小提琴以及与d3一起使用的一般模式的教程，以便更深入地了解如何使用d3构建这些类型的可视化。祝你好运！

D3 - 交错的颜色变化

1 个答案: