javascript - 使用 D3 标记动画折线图

Question

我是 D3 新手，我遇到了一个似乎无法解决的问题。

我使用 this tutorial 构建了一个动画折线图，我现在正在尝试添加它。我认为一个很酷的想法是，在线图中标记每条线，但将其标记在该线的末尾。

Here's what I've come up with so far :

正如您所见，它充其量是次优的。我错误地定位了文本，但不明显的是如何以正确的方式定位它。这是有问题的代码。

name.transition()
    .duration(duration)
    .ease("linear")
    .attr("transform", function(d) { 
      return "translate(" + (width - margin.left - margin.right) +", " + y(d[n-2]) + ")";
    });

似乎“线性”缓动已关闭，并且有时似乎也使用不同的比例。

是否有 D3 专家(或新手)愿意教我正确的方法？

Answer 1

这里似乎有两个问题:

1. .interpolate("basis") - 您对标题使用线性插值，但对路径使用 B 样条插值。注释掉这条线可以使标题与数据线保持相当紧密的关系(尽管它也会使线变得不平滑 - 对于大多数数据图来说可能是一件好事)。

2. 当轴刻度改变时“跳跃”。这是因为标题正在过渡到新比例上的新位置，但其起始位置仍然相对于旧比例设置，因此它可能会在其跟踪的线上方或下方开始。我认为您可以通过在开始转换之前添加直接 .attr 设置来修复此问题，以修复标题的初始位置:

   name
       .attr("transform", function(d) {
          return "translate(" +
              (width - margin.left - margin.right) +", " + y(d[n-2]) + ")"
       })
       .transition()
       // etc
   

参见http://jsbin.com/uvayof/2