D3.js - 按顺序淡入数据点

Question

我刚刚开始学习 d3。我在学习上取得了一些进步，但我遇到了一些我自己无法弄清楚的事情。

这是我目前所拥有的：http://tributary.io/inlet/83fba4500986b4638326

我一直试图弄清楚如何做的是在数据点中淡入淡出，因为线条路径通过它们进行动画处理。我的最佳想法是将转换时间除以点数，然后以此决定每个数据点的延迟，但我无法让它正常工作。

有没有合理的方法来做到这一点？

附：我似乎也丢失了 y 轴标签，不知道为什么……有什么想法吗？

感谢您的宝贵时间和帮助！

Answer 1

让我们从简单的部分开始吧。缺少 Y 轴是因为您的 svg 元素有一个溢出：隐藏并且第二个 svg 元素粘在第一个元素的左上角。一些 x,y 空间加上溢出：自动解决问题。

为了在路径经过时使圆圈消失，我认为您无法通过一次过渡来做到这一点。因此，一个解决方案，因为路径绘制工作在从总长度到 0 的偏移量上，您可以计算每个圆之间的距离，并将路径从一个圆“过渡”到另一个圆，在过渡结束时将其淡化。为此，请获取圆坐标、计算距离并设置过渡循环。

//Get coordinates
svg.selectAll("circle").each(function(){
  coordinates.push({x:d3.select(this).attr("cx"),y:d3.select(this).attr("cy")});
  });

//Get Distances
 for(var j=0;j<coordinates.length-2;j++)
  {
    var a,b,distance;
    a= coordinates[j];
    b= coordinates[j+1];
    distance = Math.sqrt((Math.pow(b.x-a.x,2))+(Math.pow(b.y-a.y,2)));
    //console.log("j:" + j + " a: " + JSON.stringify(a) + " b: " + JSON.stringify(b) + " distance: " +  distance);
    distanceData.push(distance)
  }



//Loop transition
var counterTransition =0,currentLength=distanceData[counterTransition];


        path
        .attr("stroke-dasharray", totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
          .duration(500)
          .ease("cubic")
          .attr("stroke-dashoffset",totalLength-currentLength)
        .attr("class", "line").each("end",animeNext);

  function animeNext(){
    counterTransition +=1;
    if(counterTransition<=distanceData.length)
    {
      var circle =svg.selectAll("circle")[0][counterTransition];
      circle=d3.select(circle);
      circle.attr("opacity",0.5);
      currentLength +=  distanceData[counterTransition]  ;
      path
      .transition()
      .duration(500)
      .ease("cubic")
      .attr("stroke-dashoffset",totalLength - currentLength)
      .attr("class", "line").each("end",animeNext);; 
    }

例如：http://tributary.io/inlet/e2eab2e689479008f11c

为了测试，我简化了数据生成。删除了点击时的平局。看起来代码随机执行了 1 到 3 次，但我认为它是支流的。 您可以使用持续时间来提高过渡平滑度。

希望对你有帮助！

编辑：具有一个过渡的其他解决方案，使用短间隔（100 毫秒）并检查路径的 stroke-dashoffset 是否等于或大于每个圆的距离，如果是，则淡化圆。在过渡结束时清除间隔。