使用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