在D3.js中缩放或平移时限制域 [英] Limiting domain when zooming or panning in D3.js

问题描述

我实现了一个简单的D3.js折线图，可以缩放和平移。它基于Stephen Bannasch的出色示例此处。

I have implemented a simple D3.js line chart that can be zoomed and panned. It is based on Stephen Bannasch's excellent example here.

我的数据的域在x维度为[0，n]。

The domain of my data is [0, n] in the x dimension.

如何使用内置缩放行为限制缩放和平移到此域（即使用鼠标滚轮事件）？

How can I limit zooming and panning to this domain using the built-in zoom behavior (i.e. using mousewheel events)?

我想防止用户平移超过0在下端或n在上端，例如他们应该永远不能请参阅x轴上的负值，并想要将缩放限制在同一个窗口。

I want to prevent users from panning past 0 on the lower end or n on the upper end, for example they should never be able to see negative values on the x-axis, and want to limit zooming to the same window.

我发现基于Jason Davies使用extent（[...]，[...]，[...]）的示例似乎不再工作在版本2.9.1。不幸的是，缩放行为目前是未在其他方面出色的API文档中没有记录的几个功能之一。

The examples that I found based on Jason Davies work using extent( [...],[...],[...] ) seem to no longer work in version 2.9.1. Unfortunately, the zoom behavior is currently one of the few features not documented in the otherwise outstanding API documentation.

欢迎任何指针。

PS。我已在D3.js邮件列表上发布了相同的问题，但未收到回复： https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion 。

PS. I have posted the same question on the D3.js mailing list but did not get a response: https://groups.google.com/d/topic/d3-js/w6LrHLF2CYc/discussion. Apologies for the cross-posting.

推荐答案

您只需要限制重新绘制的网域。以下代码可防止图形缩小到超出其初始域（如 http：//bl.ocks中所用）。 org / 1182434 ）。

You just need to limit the domain on redraw. The following code will prevent the graph from being zoomed out past it's initial domains (as used in http://bl.ocks.org/1182434).

SimpleGraph.prototype.redraw = function() {
  var self = this;
  return function() {

    self.x.domain([Math.max(self.x.domain()[0], self.options.xmin), Math.min(self.x.domain()[1], self.options.xmax)]);

    self.y.domain([Math.max(self.y.domain()[0], self.options.ymin), Math.min(self.y.domain()[1], self.options.ymax)]);

    ....

这篇关于在D3.js中缩放或平移时限制域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！