1

多段階アニメーションで視覚化しようとしています。これは私の問題を説明する不自然なフィドルです（以下のコード）。

このビジュアライゼーションでは、グループ全体が右の列への移動を完了すると、各行のボックスが緑色に変わります。IOW、最初の行 (3 つのボックスを含む) が完全に右の列にある場合、すべてのボックスが黒から緑に変わるはずですが、この時点で部分的にしか右の列に移動していない 2 番目の行は、それまで黒のままです。も完全に右側の列にあります。

この移行を設計するのに苦労しています。

遅延のない基本的な連鎖は、移動が完了するとすぐに各ボックスが緑色に変わります (これが現在の動作方法です)。十分じゃない。

一方、チェーンの遅延を作成することは困難です。グループごとの効果的な遅延は、ボックスの数に基づいており、このカウントを利用できるとは思わないからです。

混合レベルの粒度で移行を行う必要があるようです。

これを行うにはどうすればよいですか？

フィドル（以下のコード）

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 に答える