Question

我刚刚开始学习d3。我在学习方面取得了一些进步，但我遇到了一些我自己无法理解的事情。

以下是我目前的情况：http://tributary.io/inlet/83fba4500986b4638326

我一直试图弄清楚如何做的是在线路径通过它们动画时淡入数据点。我最好的想法是将转换时间除以点数，然后确定每个数据点的延迟，但是我无法正常工作。

有合理的方法吗？

P.S。我似乎也失去了我的y轴标签，我不确定为什么......任何想法？

感谢您的时间和帮助！

Answer 1

让我们从容易的部分开始吧。 Y轴缺失，因为你的svg元素有一个溢出：隐藏，第二个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毫秒）并检查路径的行程 - 仪表偏移是否等于或大于每个圆的距离，如果是这样，则使圆圈褪色。清除转换结束时的间隔。

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

1 个答案: