Jestem dość nowy do D3. Na razie jestem w stanie rysować kręgi na podstawie tablicy danych - Wow - wiem :-) Ale teraz chciałbym po prostu narysować dwa kręgi jednocześnie podczas animacji całej tablicy. Powiedzmy, że mam 1000 elementów w mojej tablicy i chcę narysować 1 i 2 w tym samym czasie, a następnie narysuj 2 i 3, 3 i 4 i tak dalej. Powinno to uzyskać bardzo ładną animację :-) Grałem z indeksami funkcjami i z wyjściem (). Usuń (), ale to nie działa.

Oto co mam:

var w = 500;
        var h = 300;
        var padding = 20;

        var dataset = [
                        [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
                        [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
                        [600, 150]
                      ];

        //Create SVG element
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

        //Create scale functions
        var xScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[0]; })])
            .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
            .domain([0, d3.max(dataset, function(d) { return d[1]; })])
            .range([h - padding, padding]);

        //Create circles
        svg.selectAll("circle")
               .data(dataset.slice(0,2))
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r",10);

        for (var i=0; i<4;i++) {

            svg.selectAll("circle").data(dataset.slice(i,i+2)).transition().duration(2000).delay(2000)
            .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", 10);
            //svg.selectAll("circle").data(dataset.slice(i,i+1)).exit().remove();
            console.log(dataset.slice(i,i+2));
        }

Ale dostanę tylko jedną animację zamiast 4 .. hmm .. co się dzieje?

2
KIC 19 wrzesień 2012, 13:27

2 odpowiedzi

Najlepsza odpowiedź

Patrząc na kod, masz ustalony czas trwania (2S) i stałe opóźnienie (2S). Pętla pętli natychmiast uruchomi się, w ten sposób kolejkowanie wszystkich czterech animacji, a zatem prawdopodobnie wszyscy grają w tym samym czasie - ale (prawdopodobnie) tylko ostatni będzie widoczny, ponieważ odbiłeś dane.

Spróbuj czegoś takiego:

svg.selectAll("circle")
   .delay( (2000*i) )
   .data(dataset.slice(i,i+2))
   .transition()
   .duration(2000)
   .attr("cx", function(d) {return xScale(d[0]);})
   .attr("cy", function(d) {return yScale(d[1]);})
   .attr("r", 10);)

Mnożenie opóźnienia przez licznik animacji powinien zrównoważyć każdą animację, a po pierwszym uruchomieniu opóźnienia, gdyby dane zostaną odbijane tuż przed rozpoczęciem animacji (w ten sposób zatrzymując końcowy krok animacji przed ponownym uruchomieniem danych przed uruchomieniem pierwszej animacji)

0
logical Chimp 19 wrzesień 2012, 10:49

Funkcja opóźnienia akceptuje połączenia zwrotne, więc nie ma potrzeby owijania wyboru w pętli.

    .delay( function(d, i) { (2000*i); } )
1
david4096 27 marzec 2013, 17:40