1

我正在尝试使用多阶段动画进行可视化。这是一个人为的小提琴，说明了我的问题（下面的代码）。

在此可视化中，当整个组完成移动到右列时，每行中的框应变为绿色。IOW，当第一行（包含 3 个框）完全位于右列时，所有框应从黑色变为绿色，但此时仅部分移动到右列的第二行将保持黑色，直到它，也完全在右栏中。

我很难设计这种过渡。

一旦完成移动，基本链接立即将每个框变为绿色（这就是它目前的工作方式）。还不够好。

另一方面，为链创建延迟是困难的，因为每组的有效延迟是基于它拥有的盒子的数量，我认为这个计数对我来说是不可用的。

就像我需要在混合粒度级别上进行转换。

我该怎么做呢？

小提琴（下面的代码）

var data = [
  ["x", "y", "z"],
  ["a", "b", "c", "d", "e"]
];

var svg = d3.select("svg");
var group = svg.selectAll("g").data(data)
    .enter()
        .append("g")
            .attr("transform", function(d, i) { 
                return "translate(0, " + (40 * i) + ")"; 
            });

var box = group.selectAll("rect")
    .data(function(d) { return d; });

box.enter()
    .append("rect")
        .attr("width", 30)
        .attr("height", 30)
        .attr("x", function(d, i) { return 60 + 30 * i; })
    .transition()
        .delay(function(d, i) { return 250 + 500 * i; })
            .attr("x", function(d, i) { return 300 + 30 * i; })
    .transition()
        .attr("style", "fill:green");
        // I probably need a delay here but it'd be based off the
        // number of elements in the nested data and I don't know
        // how to get that count
        .attr("style", "fill:green");
4

1 回答 1

1

我设法得到你想要的效果，虽然有点棘手。您可以在过渡开始和结束时自定义过渡的行为。如果您将一个函数添加到转换的末尾，以检测转换后的元素是否是组中的最后一个，则选择组中的所有矩形并将更改应用于它们。

box.enter()
    .append("rect")
        .attr("width", 30)
        .attr("height", 30)
        .attr("x", function(d, i) { return 60 + 30 * i; })
        .transition()
        .delay(function(d, i) { return 250 + 500 * i; })
            .attr("x", function(d, i) { return 300 + 30 * i; })
            .each('end', function(d, i) { 
                var g = d3.select(d3.select(this).node().parentNode),
                    n = g.selectAll('rect')[0].length;
                if (i === n - 1) { 
                    g.selectAll('rect').attr('fill', 'green');
                }
            });

更多细节在这里过渡，一个工作小提琴在这里。

于 2013-05-24T19:06:36.880 回答