D3：如何链接嵌套数据的转换？ [英] D3: How do I chain transitions for nested data?

问题描述

我试图用多段动画制作可视化。 这是一个设计的小提琴说明我的问题（下面的代码）。

I'm attempting to make a visualization with a multistage animation. Here's a contrived fiddle illustrating my problem (code below).

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

In this visualization the boxes in each row should turn green when the entire group has finished moving to the right column. IOW, when the first row (containing 3 boxes) is entirely in the right column, all the boxes should turn from black to green, but the second row, having only partially moved to the right column at this point, would remain black until it, too, is completely in the right column.

我很难设计此转换。

没有延迟的基本链接会在每个框完成移动后立即变为绿色（这是当前的工作方式）。

Basic chaining without a delay immediately turns each box green once its finished moving (this is how it's working currently). Not good enough.

另一方面，为链条创建延迟是困难的，因为每组的有效延迟是基于其拥有的盒子数量，我

On the other hand creating a delay for the chain is difficult, since the effective delay per group is based on the number of boxes it has and I don't think this count is available to me.

这就像我需要在粒度级别不同的情况下进行转换。

It's like I need the transition to happen at mixed levels of granularity.

我应该怎么做呢？

小提琴（代码如下）

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

推荐答案

我设法获得你想要的效果，小巧棘手。您可以在转换的开始和结束时自定义转换的行为。如果向转换结束添加一个函数，以检测转换的元素是否为组中的最后一个元素，则选择该组中的所有矩形并对其应用更改。

I manage to get the effect you want, it's a little tricky though. You can customize the behavior of a transition at the begining and end of a transition. If you add a function to the end of the transition that detects if the transitioned element is the last in the group, you select all the rectangles in the group and apply the change to them.

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

转换中的更多详细信息这里，一个工作的小提琴这里。

More details in the transitions here, a working fiddle here.

这篇关于D3：如何链接嵌套数据的转换？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！