D3.js缩放和平移 - Y轴

Question

我试图建立一个股票图表与缩放使用D3.js

我在寻找下手this example这里，并试图使变焦手感锁功能股票图表更自然。完美的example is this。所以，据我了解，差异在于zoomng和平移都被锁定在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。