如何限制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線圖顯示軸範圍之外的線？

回答

相關問題