javascript - D3.js 路径转换中这个短语的确切含义是什么

Question

在浏览使用 D3.js 制作折线图的文档时，我从 D3.js 的制造商那里看到了这个页面。在这个article他解释了如何在 D3.js 中制作移动折线图，并在文章中间的某个地方提到了这一点:

The old path had three control points, and the new path has three control points, so the naïve approach is to interpolate each control point from the old to the new:

⟨0,0⟩ ↦ ⟨0,6⟩

⟨1,6⟩ ↦ ⟨1,4⟩

⟨2,4⟩ ↦ ⟨2,5⟩

Since only the y-values change, this interpretation results in a vertical wiggle. When you tell D3 to transition between two paths, it takes exactly this simple approach: it finds numbers embedded in the associated path data strings, pairs them in order, and interpolates. Thus, the transition interpolates six numbers (for the three control points) and produces the same wiggle.

To eliminate the wiggle, interpolate the transform rather than the path. This makes sense if you think of the chart as visualizing a function—its value isn’t changing, we’re just showing a different part of the domain. By sliding the visible window at the same rate that new data arrives, we can seamlessly display realtime data:"

“插入变换，而不是路径”是什么意思？

如果连续样本的 x 轴值相同(如果 x 轴值以毫秒为单位移动时可能会发生这种情况，但我们只需要发送“分钟.秒”，我们如何消除垂直摆动？

我问是因为我在另一个工具包 (jqplot) 中遇到了同样的问题，这里的刻度需要以“分钟.秒”显示，但是 x 轴数据是以毫秒为单位进行采样的，所以在将它们转换为“分钟”时.seconds” 多个 x 轴点是使用不同的 y 轴值创建的，并且随着数据从左侧“移动”，我在图表中看到锯齿状的垂直摆动。

谁能解释一下如何摆脱针对相同 x 轴值限制的多个 y 轴值。

Answer 1

文章包含您问题的答案。它提供代码来演示所描述的行为:

// redraw the line, and then slide it to the left
path
    .attr("d", line)
    .attr("transform", null)
  .transition()
    .attr("transform", "translate(" + x(-1) + ")");

此代码片段将转换应用于 svg 行元素的转换属性。另一种方法是将过渡应用于行本身(如文本前面所述):

// transition the line
path.transition().attr("d", line);

第一个代码片段在 x 方向移动整条线，而第二个代码片段将线组成的点移动到 y 方向(通过 line() 函数。