[英]d3js: zooming when there are two y axes
reference: https://github.com/mbostock/d3/wiki/Zoom-Behavior 参考: https : //github.com/mbostock/d3/wiki/Zoom-Behavior
//make zoom
var zoomFirst = d3.behavior.zoom()
.x(x)
.y(y1)
.scaleExtent([0, 3])
.size([w, h])
//.center([w/2+200, h/2-200])
.on("zoom", zoomedFirst);
function zoomedFirst() {
svgContainer.select(".x.axis").call(xAxis);
svgContainer.selectAll(".y.axis.axisLeft").call(yAxisLeft);
//set y2's scale manually
svgContainer.select(".price")
.attr("d", line1(priceData))
.attr("class", "price");
svgContainer.select(".difficulty")
.attr("d", line2(difficultyData))
.attr("class", "difficulty");
}
d3.behavior.zoom()
supports autoscaling of x and y axes. d3.behavior.zoom()
支持自动缩放x和y轴。 However, I have to scale two y axes at the same time. 但是,我必须同时缩放两个y轴。 When zoom() is triggered, I can get the current scale
and translate
info from d3.event.scale
and d3.event.translate
, but I cant figure out how to make appropriate scale for the second y axis( y2
) with them. 当触发zoom()时,我可以从d3.event.scale
和d3.event.translate
获取当前scale
并translate
信息,但是我无法弄清楚如何用它们为第二个y轴( y2
)做出适当的比例。
I am also looking at https://github.com/mbostock/d3/wiki/Quantitative-Scales . 我也在看https://github.com/mbostock/d3/wiki/Quantitative-Scales 。
Since y1
's range is automatically adjusted by zoom
, if there is a way to get y1
's current range, I can get its min and max and set y2
's range based on them. 由于y1
的范围是通过zoom
自动调整的,如果有办法获得y1
的当前范围,我可以得到它的最小值和最大值,并根据它们设置y2
的范围。 However, the document doesn't specify a way to get range
given a scale
object. 但是,该文档未指定给定scale
对象获取range
的方法。
Calling y1.range()
(without any arguments) will return you the [min, max]
of the scale. 调用y1.range()
(不带任何参数)将返回比例的[min, max]
。
If values is not specified, returns the scale's current output range. 如果未指定值,则返回刻度的当前输出范围。
Most accessor functions in D3 work like this, they return you (get) the value if you call them without any arguments and set the value if you call them with arguments and return the this
object for easy chaining: D3中的大多数访问器函数都是这样工作的,如果你在没有任何参数的情况下调用它们,它们会返回(获取)值,如果用参数调用它们则设置值并返回this
对象以便于链接:
d3Object.propertyName = function (_) {
if (!arguments.length) return propertyName;
propertyName = _;
return this;
}
However, the zoom
behaviour alters the domain
and not the range
of the scales. 然而, zoom
行为改变的domain
,而不是range
的尺度。
Specifies an x-scale whose domain should be automatically adjusted when zooming. 指定x缩放,其缩放时应自动调整域。
Hence, you do do not need to get/set the range
, but instead the domain
of the scales y1
and y2
: y2.domain(y1.domain())
. 因此,您不需要获取/设置range
,而是需要缩放y1
和y2
的domain
: y2.domain(y1.domain())
。
Since the zoom function already manages all the ratios, a more abbreviated answer would be: 由于缩放功能已经管理了所有比率,因此更简陋的答案是:
var zoomFirst = d3.behavior.zoom()
.x(x)
.y(y1)
.scaleExtent([0, 3])
.size([w, h])
.on("zoom", function() {
zoomSecond.scale(zoom.scale());
zoomSecond.translate(zoom.translate());
// Update visual. Both y domains will now be updated
});
// Create copy for y2 scale
var zoomSecond = d3.behavior.zoom()
.x(x)
.y(y2) // <-- second scale
.scaleExtent([0, 3]) // <-- extent
This assumes you have called only zoomFirst to your visual. 这假设您只为您的视觉调用了zoomFirst。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.