Javascript 使用D3标记动画线条图

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

我已经用创建了一个动画线条图，现在我正在尝试添加到其中。我认为这是一个很酷的想法，在折线图中标记每一条线，但在线的末尾标记它

:

正如你所看到的，它充其量只是次优的。我对文本的定位不正确，但不明显的是如何正确定位。这是有问题的代码

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

“线性”宽松政策似乎已经停止，而且有时似乎也在使用不同的规模

---

有没有D3专家（或新手）愿意教我正确的方法？

这里似乎有两个问题：

.interpolate（“basis”）

-标题使用线性插值，路径使用B样条插值。注释掉这一行可以使标题与数据行保持紧密的联系（尽管它也会使这一行变得平滑——对于大多数数据图来说，这可能是一件好事）

轴比例改变时“跳跃”。这是因为标题正在转换到新刻度上的新位置，但其起始位置仍相对于旧刻度设置，因此它可能在其跟踪的线上方或下方开始。我认为您可以通过在开始转换之前添加一个direct

.attr

设置来修复此问题，以修复标题的初始位置：

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

---

参见

这里似乎有两个问题：

.interpolate（“basis”）

-标题使用线性插值，路径使用B样条插值。注释掉这一行可以使标题与数据行保持紧密的联系（尽管它也会使这一行变得平滑——对于大多数数据图来说，这可能是一件好事）

轴比例改变时“跳跃”。这是因为标题正在转换到新刻度上的新位置，但其起始位置仍相对于旧刻度设置，因此它可能在其跟踪的线上方或下方开始。我认为您可以通过在开始转换之前添加一个direct

.attr

设置来修复此问题，以修复标题的初始位置：

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

---

看

这真是太棒了。太糟糕了，它去掉了B样条曲线。你认为有没有办法保持这种状态，然后对标题使用不同类型的插值？不确定，但我猜这会很困难。这里显示了缓和选项：-使用默认值in-out cubic可能会做得更好，但我怀疑它是否能准确跟踪这条线。这真是太棒了。太糟糕了，它去掉了B样条曲线。你认为有没有办法保持这种状态，然后对标题使用不同类型的插值？不确定，但我猜这会很困难。这里显示了缓和选项：-使用默认的in-out cubic可能会做得更好，但我怀疑它是否能准确跟踪这条线。