如何在D3中的多个单独的过渡多边形之间添加过渡延迟?

问题描述

原始代码位于: /a>

The original Code can be found at: http://bl.ocks.org/Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77

我有许多多边形正在过渡到svg画布上(在HTML页面的底部，从左到右).

I have numerous polygons that are transitioning onto an svg canvas (from left to right, at the bottom of the HTML page).

我用来创建人字形利用D3多边形的过渡的代码:

The code I use to create an transition the chevrons leverages 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);

当前，所有多边形一起过渡到svg画布.我想在每张卡片之间放置一个延迟，这样看起来更像是从一副纸牌中一次处理一次.

Currently, all polygons transition into the svg canvas, together. I'd like to put a delay between each of them, so that it looks more like dealing from a deck of cards, one at a time.

我该如何适当地添加D3延迟以使这种情况发生?

How would I properly add a D3 delay to make this happen?

感谢您可以提供的任何帮助.

Thanks for any help you can offer.

推荐答案

尝试一下..

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

这篇关于如何在D3中的多个单独的过渡多边形之间添加过渡延迟?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！