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

我有一个基于时间的x轴d3折线图。我想展示2天的数据，从最后一次测量（如：最新时间）到之前2天，即使有更多的数据。这很有效

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

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

我有一个，你可以看到这个问题。数据显示在x轴的左侧，高于y轴的最大值，两者都不是所需的。我不知道它为什么这样做，或者我如何才能阻止它。例如，我的y刻度：

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

---

但当给定值43时，它仍会尝试绘制它。x轴上也有同样的问题。我相信一定有可能限制显示的数据，因为它是。不幸的是，我没有找到生成该页面上下两个图表的代码。

您可以使用定义的

来限制显示哪些点。

每个样本都会通过函数传递，如果返回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); });

var line=d3.line（）
.defined（函数（d）{
返回d.xxMin&&d.y>yMin&&d.y

---

或者，您可以使用

剪辑路径

类似的方法。

我所做的是，通过反复试验，将数据值除以10的倍数。 我想如果d3太大的话，它只会在它的范围外绘制数据，因为一旦我划分了这些值，它们就被完美地缩放了

.append（“圆”）
.attr（'cx'，d=>xScale（d.外国投资/10000））
.attr（'cy'，d=>yScale（d.earnings/1000））

您需要创建一个用于屏蔽趋势线路径的。通过查看源代码并搜索“clipper”，您可以在链接的示例中看到它是如何完成的。感谢您为我指明了正确的方向@meetamit，我不知道该元素！我得到了一个奇怪的结果，试图复制它在您提供的链接中的设置方式-它确实如此。但当我在我提到的网站上尝试这样做时（在像你说的那样搜索了clipper之后），我成功了。正如Tim在他的替代方案中所建议的，我使用Bostock先生的clipPath方法来阻止轴上的行，这些行在到达.svg边界的过程中穿过X/Y轴，从而表现不正常。如Mike的示例所示，有两部分，将剪切矩形附加到svg，然后将引用附加到绘制的每个路径，如：.attr（“clip path”、“url（#clip）”）