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

Question

我有缩放和平移工作的x轴,但我想为y轴添加平移.我尝试使用d3.behavior.zoom和d3.event.translate[1]得到y平移值并使用它但转换值在转换时发生变化,因此点击拖动确实平移y轴,缩放也平移y轴(以非直观的方式).

我还尝试使用两个d3.behavior.zoom实例,一个用于x轴,一个用于y轴,但只有最后一个添加在zoom事件上.

这是一个适用于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>

在此示例中,我尝试使用y值d3.event.translate[1]并且它适用于拖动,但不希望的行为是,取决于用户鼠标缩放的位置,还会更改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);

所以我们将使用zoom来处理x轴的东西.

为Y轴,以获得JUST泛行为...

创建一个单独的拖动行为,捕获"dy",移动y域,然后重新应用它.

1. 添加拖动行为

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

2. 让y scale的域可变(我们会在拖动时修改它)

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