d3.js：具有限制的平移 [英] d3.js: pan with limits

问题描述

我正在使用泛功能的基本线性图表。

I'm working on a basic linear chart with pan functionality.

我设法限制图表元素可以通过限制< c $ c> d3.event.translate 值：

I managed to limit the extent to which the chart elements can be dragged by limiting the d3.event.translate values:

var tx = Math.max(0, d3.event.translate[0]),
    ty = Math.min(0, d3.event.translate[1]);

现在我只需要相应地限制x和y轴。请参阅示例：
http://jsfiddle.net/Q2SWV/

All I need now is to limit the x and y axes accordingly. See the example: http://jsfiddle.net/Q2SWV/

向下或向左拖动时，图表上的条形限制为0。 x和y轴不是。关于如何解决轴问题的任何想法？

The bars on the chart are limited by 0 when dragging down or to the left. The x and y axes aren't. Any ideas on how to fix the axis problem?

推荐答案

你很接近，但你错过了最后一步使用更新的翻译坐标更新 zoom 行为。这将解决您的问题，因为两个轴都使用 zoom 更新。在确定 tx 和 ty 后添加以下权利：

You're very close, but you're missing the final step of updating the zoom behavior with your updated translation coordinates. This will fix your problem since both axes are updated using the zoom. Add the following right after determining tx and ty:

zoom.translate([tx, ty]);

这将对您的轴应用限制。请参阅更新版本： http://jsfiddle.net/mdml/nZD3E/ 。

This will apply the limits to your axes. See updated fiddle here: http://jsfiddle.net/mdml/nZD3E/.

这篇关于d3.js：具有限制的平移的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！