1

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

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

到目前为止，这是我想出的：

在此处输入图像描述

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

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

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

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

4

1 回答 1

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

于 2013-03-08T00:56:55.517 回答