svg - d3.js 保持可缩放的 y 轴不低于零

Question

我有一个带有缩放功能的图表。我的主要观察是 x 轴根据我当前的缩放级别更新了它的比例。我希望 y 轴也这样做，所以启用 zoom.y(y) ，不希望的副作用是现在用户可以向所有方向缩小，甚至缩小到图形“下方”的负值。

http://jsfiddle.net/ericps/xJ3Ke/5/
var zoom = d3.behavior.zoom().scaleExtent([0.2, 5])
.on("zoom", draw); 似乎并没有真正考虑 y 轴。并且用户仍然可以将图表向任意方向拖动到无限远。

我想到的一个想法是与启用 zoom.y(y) 无关，并且只需要根据当前可见范围内的内容重新绘制 y 轴。就像某种仅基于 X 轴位置的重绘。我现在根本不想上下滚动，只想要左右滚动

除了注释掉 //zoom.y(y) 之外，这将如何完成？洞察力赞赏。

Answer 1

您需要做的就是更新 draw 方法中的 y 比例域。

缩放功能将修改关联的比例并设置它们的域以模拟缩放。因此，例如，您可以通过执行 x.invert(0) 和 x.invert(width) 来获得 x 可见数据边界。如果您将数据转换为使用日期而不是字符串，那么这就是我建议您使用的过滤器，它可能会更有效。

尽管如此，您仍然可以使用 x 比例来过滤可见数据，找到这些值的 y 轴范围，并相应地设置您的 y 比例域以匹配。事实上，您只需几行即可完成所有这些(在您的缩放更新回调中):

var yExtent = d3.extent(data.filter(function(d) { 
    var dt = x(d.date);
    return dt > 0 && dt < width;
}), function(d) { return d.value; });
y.domain(yExtent).nice(); 

你可以试试看 here

为了更好地解释发生了什么:

缩放行为监听鼠标事件并修改关联比例的范围。

比例尺由轴使用，轴将它们绘制为带刻度的线，并且比例尺也由与您在回调中设置的路径和区域相关联的数据使用。

因此，当缩放更改时，它会触发一个回调，基本方法就是您所拥有的:

svg.select("g.x.axis").call(xAxis);
svg.select("g.y.axis").call(yAxis);
svg.select("path.area").attr("d", area);
svg.select("path.line").attr("d", line);

我们使用新更新的域重新绘制 x 和 y 轴，并重新绘制(重新计算)区域和线 - 还使用新域的 x 和 y 尺度。

因此，为了获得您想要的行为，我们取消了 y 尺度上的默认缩放行为，相反，每当我们获得缩放或平移时，我们都会自己修改 y 尺度域:方便地，由于缩放行为，我们已经对这些操作进行了回调.

计算 y 尺度域的第一步是找出哪些数据值是可见的。 x 轴已配置为输出到 0 到宽度的范围，缩放行为已更新 x 比例的域，以便只有原始域的子集输出到此范围。因此，我们使用 javascript 数组的 filter 方法仅提取那些映射将它们放在我们可见范围内的数据对象:

data.filter(function(d) { 
    var dt = x(d.date);
    return dt > 0 && dt < width;
}

然后我们使用方便的 d3 extent 方法返回数组中的最小值和最大值。但是因为我们的数组都是对象，所以我们需要一个访问器函数，以便 extents 方法有一些数字要实际比较(这是 D3 中的常见模式)

d3.extents(filteredData, function(d) { return d.value; });

所以现在我们知道给定当前 x 比例绘制的所有数据点的最小值和最大值。最后一点就是设置 y 比例的域并继续正常运行!

y.domain(yExtent).nice(); 

我在 api 中找到了一个很好的方法，因为它是你想要秤做的那种事情，而 d3 经常为你做你想做的事情。

搞清楚这些东西的一个很好的教程是: http://alignedleft.com/tutorials/
甚至你认为你已经知道的部分也值得逐步了解。