javascript - D3 : Is it possible to zoom+pan one axis and only pan the other?

Question

我有 x 轴的缩放和平移功能，但我想为 y 轴添加平移功能。我尝试使用 d3.behavior.zoom 和 d3.event.translate[1] 来获取 y 平移值并使用它，但是当缩放发生时平移值会发生变化，而单击拖动确实会平移 y 轴，缩放也会平移 y 轴(以一种非直观的方式)。

我还尝试使用两个 d3.behavior.zoom 实例，一个用于 x 轴，一个用于 y 轴，但只有最后添加的一个在缩放事件中被调用。

这是一个适用于在 x 方向缩放和平移的示例，我也想添加 y 平移(但不是 y 缩放):

var x = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var y = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var rectangleSelector = d3.select('svg')
  .append('g')
  .selectAll('rect')
  .data([[0, 0], [50, 50], [100, 100]])
  .enter()
  .append('rect')
  .attr('fill', 'black')
  .attr('x', d => x(d[0]))
  .attr('y', d => y(d[1]))
  .attr('width', d => x(d[0] + 40) - x(d[0]))
  .attr('height', d => y(40));
  
d3.select('svg')
  .call(d3.behavior.zoom().x(x).on('zoom', () => {
    rectangleSelector
      .attr('x', d => x(d[0]))
      .attr('y', d => y(d[1]))
      .attr('width', d => x(d[0] + 40) - x(d[0]))
      .attr('height', d => y(40));
  }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>

在此示例中，我尝试使用 d3.event.translate[1] 中的 y 值，它适用于拖动，但不良行为是根据用户鼠标缩放的位置也会发生变化y 轴的平移值。

var x = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var y = d3.scale.linear()
  .domain([0, 800])
  .range([0, 800]);

var rectangleSelector = d3.select('svg')
  .append('g')
  .selectAll('rect')
  .data([[0, 0], [50, 50], [100, 100]])
  .enter()
  .append('rect')
  .attr('fill', 'black')
  .attr('x', d => x(d[0]))
  .attr('y', d => y(d[1]))
  .attr('width', d => x(d[0] + 40) - x(d[0]))
  .attr('height', d => y(40));
  
d3.select('svg')
  .call(d3.behavior.zoom().x(x).on('zoom', () => {
    var translateY = d3.event.translate[1];
  
    rectangleSelector
      .attr('x', d => x(d[0]))
      .attr('y', d => y(d[1] + translateY))
      .attr('width', d => x(d[0] + 40) - x(d[0]))
      .attr('height', d => y(40));
    }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width="800" height="800"></svg>

Answer 1

JSFIDDLE:https://jsfiddle.net/sladav/o8vaecyn/

对于初学者来说，缩放行为处理 x 轴的平移和缩放，这由...处理

var zoom = d3.behavior.zoom()
    .x(x)
    .scaleExtent([1, 10])
    .on("zoom", zoomed);

所以我们将使用缩放来处理 x 轴的东西。

对于 Y 轴，只是平移行为...

创建一个单独的拖动行为来捕获“dy”、移动 y 域并重新应用它。

1. 添加拖动行为

   var drag = d3.behavior.drag()
        .on("drag", dragging)
   

2. 让 y 尺度的域可变(我们将在拖动时修改它)

   var yPan = 0;
   var yMin = (-height / 2);
   var yMax = (height / 2);
   
   var y = d3.scale.linear()
       .domain([yMin, yMax])
       .range([height, 0]);
   

3. 添加一个函数以在拖动事件时重新缩放 Y 轴

   function dragging(d) {
      yPan = d3.event.dy;
      yMin += yPan;
      yMax += yPan;
      y.domain([yMin, yMax])
      d3.select(".y.axis").call(yAxis)};
   

4. 从您的 SVG 元素调用拖动功能

   var svg = d3.select("body").append("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
          .call(zoom)
          .call(drag);