D3：是否可以缩放+平移一个轴而只平移另一个轴？

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 轴，JUST 获得平移行为...

创建一个单独的拖动行为来捕获“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);
   

Answer 2

我想出了一种方法来做到这一点，但感觉就像一个巨大的黑客：

var lastY = 0;

var zoom = d3.behavior.zoom().x(x);

zoom.on('zoom', () => {
  var translateY;

  if (d3.event.sourceEvent.type === 'mousemove') {
    // if it's a drag event then use the value from the drag
    translateY = d3.event.translate[1];
    lastY = translateY;
  } else {
    // if it's a wheel event then set the y translation to the last value
    translateY = lastY;
    zoom.translate([d3.event.translate[0], translateY]);
  }

  // translateY can now be used here as an offset to any drawing like so:
  rectangleSelector.attr('y', y(d[1] + translateY));
});

Answer 3

你可以使用

zoom.center

让代码更简洁，如下所示：

var lastY = 0;
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));
  
 var zoom = d3.behavior.zoom().center([400, 400]).x(x);
 zoom.on('zoom', () => {
     var translateY = d3.event.translate[1];
     zoom.center([400, translateY]);
     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));
});

d3.select('svg').call(zoom);

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

Answer 4

D3v6 提供对独立缩放轴的本地访问：https://observablehq.com/@d3/x-y-zoom