D3.js缩放和平移 - 锁定在y轴上

Question

我正在尝试使用D3.js构建具有缩放功能的股票图表

我希望从这里开始this example并尝试让缩放感觉更加自然。一个完美的example is this。因此，据我所知，差异是缩放和平移都锁定在Y轴上，Y轴移动的唯一方法是自动填充当前可见数据的价格范围。

另一个明显的区别是缩放不会像第一个例子中那样放大鼠标的当前位置。

如何调整示例以与其他图表更紧密地协作？什么是相关的代码，应该如何改变？

Answer 1

将缩放行为设置为而不是会影响y轴很简单：只是不要将y缩放附加到缩放行为。

在您链接的示例代码中，缩放功能将添加到以下行中：

  this.plot.call(d3.behavior.zoom()
                    .x(this.x)
                    .y(this.y)
                    .on("zoom", this.redraw() )
                    );

创建缩放行为对象/函数，将其链接到图形x和y缩放，并告诉它在每个缩放事件后调用this.redraw()返回的函数。缩放行为会在缩放时自动更改缩放的域，然后重绘功能使用修改后的缩放。如果你没有给它修改y比例，那么缩放不会影响y域。

让y比例自动调整到给定的数据范围有点棘手。但是，请记住缩放行为将自动调整x刻度的域以水平表示可见数据的范围。然后，您必须获取数据数组的相应切片并从中确定y值的范围，相应地设置y域，然后调用重绘函数（记住this.redraw()只需返回重绘函数，要在另一个函数中调用它，你需要使用this.redraw()()）。

要使缩放与鼠标位置无关，请为缩放行为设置center point。