2016-07-22 2 views
1

Das Original-Code finden Sie unter: http://bl.ocks.org/Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77Wie füge ich eine Übergangsverzögerung zwischen mehreren einzelnen Übergangspolygonen in D3 hinzu?

habe ich zahlreiche Polygone, die auf eine svg Leinwand Übergang sind (von links nach rechts, am unteren Rand der HTML-Seite).

Der Code, den ich verwenden, um einen Übergang der Sparren erstellen nutzt D3 Polygon:

// Create Polygons for SDLC 
    svgCanvas.selectAll("a") 
     .data(dataSet) 
     .enter().append("a") 
     .attr("xlink:href", function(d) { return d.link; }) 
     .append("svg:polygon") 
    //svgCanvas.selectAll("polygon") 
     //.data(dataSet) 
     //.enter().append("polygon") 
     .attr("id", function(d,i){ return (selectString.replace(/ /g,'_').replace(/#/g,'') + "_index_" + i); }) 
     .attr("originalcolor","violet") 
     .style("stroke","blue") 
     .style("fill","violet") 
     .style("stroke-width",2) 
     .attr("points", origin) 
     .on('mouseover', chevronMouseOver) 
     .on("mouseout", chevronMouseOut) 
     .on("click", chevronMouseOut) 
     .transition() // <------- TRANSITION STARTS HERE -------- 
     .duration(3000) 
     .attr("points", calculateChevron); 

Derzeit werden alle Polygone Übergang in die svg Leinwand zusammen. Ich würde gerne eine Verzögerung zwischen jedem von ihnen machen, so dass es eher so aussieht, als würde man von einem Kartenspiel, eines nach dem anderen, handeln.

Wie würde ich eine D3-Verzögerung richtig hinzufügen, um dies zu ermöglichen?

Danke für jede Hilfe, die Sie anbieten können.

+1

Verwenden '.delay()' mit einer Funktion. Siehe [* "D3 stagger animations" *] (/ q/27948023), [* "Staggered transition in Mehrliniengrafik" *] (/ q/21135296). – altocumulus

Antwort

2

versuchen, dies ..

.transition() // <------- TRANSITION STARTS HERE -------- 
.delay(function(d,i){ return 100*i; }) 
.duration(3000) 
.attr("points", calculateChevron); 
+0

Es funktioniert, obwohl ich die Dauer auf 1100 reduzieren musste, um es glatter zu machen. Vielen Dank. –

Verwandte Themen