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轴来说，只是泛行为......

创建一个单独的拖动行为，捕获＆＃34; dy＆＃34;，移动y域，然后重新应用它。

添加拖动行为

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

让y scale的域变量（我们在拖动时修改它）

var yPan = 0;
var yMin = (-height / 2);
var yMax = (height / 2);

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

添加一个函数以在拖动事件

上重新缩放Y轴

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

从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

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

Answer 4

您可以使用

zoom.center

让代码更清晰，如下所示：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

4 个答案: