[英]d3 change scale domain and keep the zoom working as expected
I have a question about zoom and scale/axis. 我对缩放和缩放/轴有疑问。
At some point my chart has the following configuration: 在某些时候,我的图表具有以下配置:
Y domain scale: Y域尺度:
this.scaleY = d3
.scaleLinear()
.domain([10, 20])
.range([this.chartHeight, 0]);
ZoomTransform: ZoomTransform:
{
x: -10,
y: -4,
k: 0.2
}
now, I change programmatically the y-scale domain (and axis): 现在,我以编程方式更改y缩放域(和轴):
this.scaleY = d3
.scaleLinear()
.domain([80, 100])
.range([this.chartHeight, 0]);
The problem is that if I zoom in/out, the y-scale go back to the original one. 问题是,如果我放大/缩小,则y比例会回到原始比例。
So I'd like to change the domain of one axis, and keep the zoom working as expected. 因此,我想更改一个轴的域,并保持缩放正常工作。
I hope I've made myself clear. 我希望我已经说清楚了。
Do you see any solutions in order to keep the current zoom and simply update the axis? 您是否看到任何解决方案以保持当前缩放并仅更新轴? I don't want to reset my zoom to the Identity. 我不想将缩放重置为“身份”。
Thank you 谢谢
The d3.event.transform
object also contains other methods on its prototype such as rescaleY()
. d3.event.transform
对象在其原型上还包含其他方法,例如rescaleY()
。
rescaleY(originalYScale)
will return ay scale whose domain has been altered to take account of the d3.event.transform
's current transform parameters. rescaleY(originalYScale)
将返回y比例尺,其范围已更改,以考虑d3.event.transform
的当前转换参数。
Then you can update your y axis with this new scale using the axis.scale()
setter method. 然后,您可以使用axis.scale()
setter方法使用此新比例尺来更新y轴。 And finally, you can update your axis element ( g
element) using the `call() method. 最后,您可以使用`call()方法更新轴元素( g
元素)。
So, as shown in Mike Bostock's zoom example , your zoom callback may look like: 因此,如Mike Bostock的zoom示例所示 ,您的zoom回调可能类似于:
function zoomed() {
view.attr("transform", d3.event.transform);
gX.call(xAxis.scale(d3.event.transform.rescaleX(xScale)));
gY.call(yAxis.scale(d3.event.transform.rescaleY(yScale)));
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.