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

标签 javascript d3.js

我有 x 轴的缩放和平移功能,但我想为 y 轴添加平移功能。我尝试使用 d3.behavior.zoomd3.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>

最佳答案

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

关于javascript - D3 : Is it possible to zoom+pan one axis and only pan the other?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35215202/

相关文章:

javascript - 样式加载器不适用于 Webpack2

javascript - JQuery 代码不工作

javascript - 将 if 语句与创建映射变量结合使用 (Javascript)

javascript - 如何使用 GET 方法通过 XMLHttpRequest 传递 FormData

php - 使用 jquery ajax 处理服务器端验证的最佳方法

javascript - 谷歌地图 fitBounds 不适用于 ajax 功能 - 似乎只适用于一个标记

d3.js - 如何在 cal-heatmap 中粘贴月份

javascript - D3 如何在ID中有点时按ID选择元素

typescript - 如何使 D3 .data() 参数识别输入数据的 typescript 类型?

javascript - d3.js 中条形图之间的关联距离