Question

我正在尝试使用多级动画进行可视化。 Here's a contrived fiddle说明了我的问题（下面的代码）。

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

我很难设计这种过渡。

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

另一方面，为链条创建延迟很困难，因为每组的有效延迟是基于它的盒子数量，我不认为这个数量可供我使用。

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

我该怎么做呢？

The fiddle（以下代码）

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

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

过渡here中的更多细节，一个工作小提琴here。

D3：如何链接嵌套数据的转换？

1 个答案: