如何在D3中的多个单独转换多边形之间添加转换延迟？

Question

原始代码可在以下网址找到:http://bl.ocks.org/Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77

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

我使用的代码创建了V形杠杆利用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画布.我想在它们之间加一个延迟,这样它看起来更像是从一副纸牌中进行交易,一次一个.

如何正确添加D3延迟才能实现这一目标？

谢谢你尽你所能的帮助.

Answer 1

试试这个..

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