d3js：有两个y轴时缩放

参考：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()支持 x 轴和 y 轴的自动缩放。但是，我必须同时缩放两个 y 轴。当 Zoom() 被触发时，我可以获得当前的scale and translate信息来自d3.event.scale and d3.event.translate，但我不知道如何为第二个 y 轴进行适当的缩放（y2） 跟他们。

我也在看https://github.com/mbostock/d3/wiki/Quantitative-Scales https://github.com/mbostock/d3/wiki/Quantitative-Scales.

Since y1的范围自动调整为zoom，如果有办法得到y1的当前范围，我可以获得它的最小值和最大值并设置y2的范围基于它们。但是，该文档没有指定获取方法range给定一个scale object.

Calling y1.range()（没有任何参数）将返回给你[min, max]的规模。

来自docs https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-linear_range:

如果未指定值，则返回电子秤的当前输出范围。

D3 中的大多数访问器函数都是这样工作的，如果您在不带任何参数的情况下调用它们，它们会返回（获取）值；如果您使用参数调用它们并返回this易于链接的对象：

d3Object.propertyName = function (_) {
    if (!arguments.length) return propertyName;
    propertyName = _;
    return this;
}

但是，那zoom行为改变了domain而不是range的秤。

来自docs https://github.com/mbostock/d3/wiki/Zoom-Behavior#wiki-x:

指定缩放时应自动调整域的 x 比例。

因此，您不需要获取/设置range，而是domain秤的y1 and y2: y2.domain(y1.domain()).