d3.js - 如何限制 d3 折线图显示轴范围之外的线？

Question

我有一个基于时间的 x 轴的 d3 折线图。我想显示 2 天的数据，从最后一次测量(如:最新的时间)到前 2 天，即使有更多的数据。这有效。

为了让用户看到没有出现的数据，我有一个缩放行为(不允许缩放，只能在 x 轴上平移)。这也有效。

我现在面临的问题是，当我有超出轴范围(x 轴或 y 轴)的数据时，它仍然绘制到 svg 的边界。我想将可见线限制在以轴为界的 svg 区域。

我有一个 fiddle here ，您可以在其中查看问题。数据显示在 x 轴的左侧并且高于 y 轴的最大值，两者都不是所希望的。我不确定它为什么这样做，或者我如何阻止它。例如。我的 y 比例:

yScale = d3.scale.linear().domain([41.5, 34.5]),

但是当给定值 43 时，它仍会尝试绘制它。 x 轴上的相同问题。我确信必须可以限制显示的数据，因为 this guy managed它。不幸的是，我还没有找到生成该页面下方 2 个图表的代码。

Answer 1

您可以使用 defined 限制显示哪些点

每个样本都通过该函数并返回false，点未显示...

var line = d3.line()
    .defined(function(d) { 
       return d.x < xMax && dx > xMin && d.y > yMin && d.y< yMax; 
    })
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

或者，您可以使用 clip-path喜欢 in this example .