Question

参考：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获取当前的d3.event.scale和d3.event.translate信息，但我无法弄清楚如何为第二个做出适当的比例y轴（y2）与它们。

我也在关注https://github.com/mbostock/d3/wiki/Quantitative-Scales。

由于y1的范围由zoom自动调整，如果有办法获得y1的当前范围，我可以得到它的最小值和最大值并设置{{ 1}}基于它们的范围。但是，该文档未指定获取y2对象range的方法。

Answer 1

调用y1.range()（不带任何参数）将返回缩放的[min, max]。

来自docs：

如果未指定值，则返回比例的当前输出范围。

D3中的大多数访问器函数都是这样工作的，如果你在没有任何参数的情况下调用它们，它们会返回你的（获取）值，如果用参数调用它们则设置值并返回this对象以便于链接：

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

但是，zoom行为会改变比例domain而不是range。

来自docs：

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

因此，您不需要获取/设置range，而是设置domain和y1的{{1}}：y2。

Answer 2

由于缩放功能已经管理了所有比率，因此更简陋的答案是：

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

这假设您只为您的视觉调用了zoomFirst。

d3js：当有两个y轴时进行缩放

2 个答案: