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

我有一个基于时间的x轴的d3折线图。我想要显示2天的数据，从最后一次测量（如：最新的时间）到2天前的数据，即使数据比这还多。这工作。如何限制d3线图显示轴范围之外的线？

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

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

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

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

但是，当给出值43时，它仍会尝试绘制它。 x轴上同样的问题。我敢肯定，它必须能够限制显示的数据，因为this guy managed它。不幸的是，我还没有找到该页面下面两个图表正在生成的代码。

来源

2016-03-03 mcProgrammer

您需要创建一个[clipPath]（https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath）来屏蔽趋势线路径。您可以通过查看源代码并搜索“剪辑器”来查看链接示例中的操作。 – meetamit

感谢您指出我正确的方向@meetamit，不知道那个元素！我得到了一个奇怪的结果，试图复制它在您提供的链接中设置的方式 - 它确实[this]（http://jsfiddle.net/rc38dLqu/2/）。但是当我试图像我在之前提到的网站那样做时（在像你说的那样寻找剪辑器之后），我就开始工作了。 – mcProgrammer

可以使用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。

来源

2016-10-01 20:20:40 Tim

Tim在他的另一个建议中提到，我使用Bostock先生的clipPath方法，通过将X/Y轴穿过出口到.svg边界的轴线停止行为不正常的行。如Mike的示例所示，有两部分，将裁剪矩形附加到svg，然后将引用附加到您绘制的每个路径，例如：.attr（“clip-path”，“url（#clip）”） –

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

回答

相关问题