javascript - 如何在 d3.js 中有选择地缩放 x 和/或 y - 动态？

Question

我有a small JavaScript graphing/histogramming library它允许在 X 或 Y 方向或两个方向上进行缩放/平移，如创建绘图时所声明的那样。 this jsfiddle 中有一个简化示例.

我想做的是允许缩放行为在例如按下 shift 键时发生变化。

我的示例中缩放逻辑的核心目前如下所示:

 function draw() {
     // handle rendering of plot
 }

 // zoom behavior:
 var zoom = d3.behavior.zoom();
 zoom.x(xscale);
 //zoom.y(yscale);   <-- add this in if y-scrolling is to be allowed

 zoom.on("zoom", draw);

 // Restrict zoom action to display box (non-axis part) only:
 svg.append("svg:rect")
     .attr("class", "pane")
     .attr("width", w - (padding_left + padding_right))
     .attr("height", h - (padding_top + padding_bottom))
     .attr("cursor", "move")
     .attr("fill", "none")
     .attr("pointer-events", "all")
     .attr("x", padding_left)
     .attr("y", padding_top)
     .call(zoom);

 function keydown() {
     if(d3.event.shiftKey) {
         // turn on y-zoom behavior, turn off x...
     }
 }

 function keyup() {
     // revert to old behavior
 }

 d3.select("body").on("keydown", keydown);
 d3.select("body").on("keyup", keyup);

我可以在设置绘图时选择性地打开 X 或 Y 缩放；但我想在按下 shift 键时间歇性地执行此操作，即在 keydown 和 keyup 中。由于缩放行为曾经连接到我的“ Pane ”div，因此我不清楚如何使其动态化。

谢谢!

Answer 1

最简单的方法是在您的 zoom 函数中处理它。也就是说，您无需修改​​生成的事件，只需修改处理事件的方式即可。因此，如果启用 x 缩放，您只需指定 x 比例。代码看起来像这样。

var zoom = d3.behaviour.zoom().on("zoom", onZoom);
var svg = d3.select("body").append("svg").call(zoom);

function onZoom() {
  if(x_zoom) {
    svg.attr("transform", "scale(" + d3.event.scale + ", 1)");
  }
  else if(y_zoom) {
    svg.attr("transform", "scale(1, " + d3.event.scale + ")");
  }
}