参考：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()支持x和y轴的自动缩放。但是，我必须同时缩放两个y轴。触发zoom（）时，我可以从和获取当前信息scale和translate信息，但是我无法弄清楚如何使用它们为第二个y轴（）设置合适的比例。d3.event.scaled3.event.translatey2
我也在看https://github.com/mbostock/d3/wiki/Quantitative-Scales。
由于y1的范围是由自动调整的zoom，因此，如果有一种方法可以获取y1的当前范围，则可以获取其最小值和最大值并y2根据它们来设置的范围。然而，该文件没有指定一种方式来获得range给定的一个scale对象。
调用y1.range()（不带任何参数）将返回[min, max]标度的。
从文档：
如果未指定值，则返回标尺的当前输出范围。
D3中的大多数访问器函数都是这样工作的，如果您在不带任何参数的情况下调用它们，则它们会返回给您（获取）值；如果在带参数的情况下调用它们，则将设置您的值并返回this对象以便于链接：
d3Object.propertyName = function (_) {
if (!arguments.length) return propertyName;
propertyName = _;
return this;
}
但是，该zoom行为会更改刻度的domain而不是range。
从文档：
指定x比例尺，缩放时应自动调整其域。
因此，你不需要获取/设置range，而是在domain天秤y1和y2：y2.domain(y1.domain())。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句