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

【问题标题】：How do I add a transition delay between multiple individual transitioning polygons in D3?如何在 D3 中的多个单独过渡多边形之间添加过渡延迟？
【发布时间】：2016-07-22 19:53:19
【问题描述】：

原始代码可见：http://bl.ocks.org/Guerino1/3a51eeb95d3a8345bc27370e8c9d5b77

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

我使用 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 延迟来实现这一点？

感谢您提供的任何帮助。

【问题讨论】：

将.delay() 与函数一起使用。见"D3 stagger animations"、"Staggered transition in multi line graph"。

标签： d3.js delay transition polygon

【解决方案1】：

试试这个..

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

【讨论】：

它有效，尽管我不得不将持续时间降低到 1100 以使其运行更顺畅。谢谢。