Question

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

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

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

我有一个fiddle here，你可以在那里看到问题。数据显示在x轴左侧并且高于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之类的listOfNames = modules.map(module -> module.modulename()).collect(Collectors.toList());。

Answer 2

我所做的是，我通过反复试验将数据值除以10的倍数。我认为，如果d3太大，d3只会绘制超出其范围的数据，因为一旦我对这些值进行划分，它们便会完美缩放。

["Sunday","Monday","Tuesday",'Wednesday","Thursday","Friday","Saturday"]

但是，我的数据是固定的，并且我不打算按比例放大图表。 clipPath也是我的理想解决方案，但我还不知道如何使用它。

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

2 个答案: