d3js 单向放大，双向平移

Question

我正在尝试构建一个仅在 X 轴上缩放但允许在两个轴上平移的 d3js 图表。下面的例子有我想要的效果：

https://jsfiddle.net/xpr364uo/

但是，我无法将其转换为我自己的代码。一方面，我正在渲染到画布，所以我无法在某些元素上设置“转换”属性。据我了解，我的缩放在比例的副本上使用 rescaleX/rescaleY，就像通过 d3-zoom 进行缩放的“新方法”一样：

const zoomBehavior = zoom().on('zoom', () => {
    const xDomain = event.transform.rescaleX(x2).domain();
    const yDomain = event.transform.rescaleY(y2).domain();          
    xScale.domain(xDomain);
    yScale.domain(yDomain);
    render();
});

这适用于在两个轴上缩放/平移。如何修改它以获得与小提琴相同的效果？在我的代码中，我应该如何处理 deltaPanY（来自小提琴）？

Answer 1

您可以跟踪第二次缩放变换（我称之为yTransform）并使用它来重新缩放 y 轴。由于您希望 x 正常缩放，您仍然可以使用 d3.event.transform.rescaleX() 在 X 轴上重新缩放，而 yTransform 可用于在 Y 轴上重新缩放。

平移时，yTransform 的 y 平移值应更新为当前缩放状态。相反，在缩放时，应使用yTransform 覆盖缩放状态的y 平移变化。

也许是这样的：

var yTransform = d3.zoomIdentity; // initial state for the y transform

var zoom = d3.zoom()
  .on("zoom", function() {
    var t = d3.event.transform;  // zoom state
    x2 = t.rescaleX(x);          // rescale x as normal (t.y is irrelevant)

    // for a pan event, update the y translate
    if (d3.event.sourceEvent.type != "wheel") yTransform.y = t.y;  

    // for a scroll, use the  current y translate
    else t.y = yTransform.y;        

    y2 = yTransform.rescaleY(y);   // rescale y.

    render();

  })

yTranslate 的 k 和 x 值无关紧要：比例始终为 1，因为我们没有放大，x 平移与在 y 轴上重新缩放无关。 上面没有考虑双击事件，但我会在下面补充一下。

var dots = d3.range(100)
  .map(function() {
     return {x: Math.random(), y: Math.random()}
  })
  
var x = d3.scaleLinear().range([0,500])
var x2 = x.copy();
var y = d3.scaleLinear().range([0,300])
var y2 = y.copy();

var canvas = d3.select("canvas")
var context = canvas.node().getContext("2d");

// Just for reference:
var axis = d3.axisRight(y);
var g = d3.select("svg").append("g");
  g.call(d3.axisRight(y2))
  
  

render();

var yTransform = d3.zoomIdentity;

var zoom = d3.zoom()
  .on("zoom", function() {
    var t = d3.event.transform;
    x2 = t.rescaleX(x);

   // For dbl clicks, d3.event.sourceEvent is null.
   if (d3.event.sourceEvent && d3.event.sourceEvent.type != "wheel") yTransform.y = t.y;  
   else t.y = yTransform.y;      

    y2 = yTransform.rescaleY(y);
   
    render();
    
  })

canvas.call(zoom);


  
function render() {
   context.clearRect(0,0,500,300);
   dots.forEach(function(d) {
      context.beginPath();
      context.arc(x2(d.x), y2(d.y), 5, 0, 2 * Math.PI);
      context.stroke(); 
   })
   
   g.call(d3.axisRight(y2));
   
}

canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}
svg {
  pointer-events:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<canvas width="500" height="300"></canvas>
<svg width="500" height="300"></svg>

因为我直接修改属性 - 这不是最理想的。

或者，我们可以跟踪 y 上的平移偏移量（带有 dbl 点击/滚轮事件和没有这些事件的 y 平移之间的差异）。 y offset 和 y translate 都可以用来创建适当的缩放变换：

var yOffset = 0;
var lastY = 0;

var zoom = d3.zoom()
  .on("zoom", function() {
    var t = d3.event.transform;
    x2 = t.rescaleX(x);

   // For dbl clicks, d3.event.sourceEvent is null.
   if (d3.event.sourceEvent && d3.event.sourceEvent.type != "wheel") {
     lastY = t.y - yOffset;
     y2 = d3.zoomIdentity.translate(0,t.y-yOffset).rescaleY(y);
   }
   else {
     yOffset = t.y - lastY; // ignore change in y for dbl click and wheel events
   }
    render();
})

var dots = d3.range(100)
  .map(function() {
     return {x: Math.random(), y: Math.random()}
  })
  
var x = d3.scaleLinear().range([0,500])
var x2 = x.copy();
var y = d3.scaleLinear().range([0,300])
var y2 = y.copy();

var canvas = d3.select("canvas")
var context = canvas.node().getContext("2d");

// Just for reference:
var axis = d3.axisRight(y);
var g = d3.select("svg").append("g");
  g.call(d3.axisRight(y2))
  
  

render();

var yOffset = 0;
var lastY = 0;

var zoom = d3.zoom()
  .on("zoom", function() {
    var t = d3.event.transform;
    x2 = t.rescaleX(x);
    
   // For dbl clicks, d3.event.sourceEvent is null.
   if (d3.event.sourceEvent && d3.event.sourceEvent.type != "wheel") {
     lastY = t.y - yOffset;
     y2 = d3.zoomIdentity.translate(0,t.y-yOffset).rescaleY(y);
   }
   else {
     yOffset = t.y - lastY; // ignore change in y for dbl click and wheel events
   }

    render();
    
  })

canvas.call(zoom);


  
function render() {
   context.clearRect(0,0,500,300);
   dots.forEach(function(d) {
      context.beginPath();
      context.arc(x2(d.x), y2(d.y), 5, 0, 2 * Math.PI);
      context.stroke(); 
   })
   
   g.call(d3.axisRight(y2));
   
}

canvas, svg {
  position: absolute;
  top: 0;
  left: 0;
}
svg {
  pointer-events:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<canvas width="500" height="300"></canvas>
<svg width="500" height="300"></svg>