Question

我需要缩放和平移一组svg元素，例如以下示例：

https://embed.plnkr.co/kVw0rWMo728dmbm8EjuG/

我已经完成了缩放行为，但是在拖动鼠标（平移）时无法移动图形。我尝试过：

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .translateExtent([[150, 150],[150, 150]])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
  d3.select('svg').select('g')
    .style('transform', 'translate(' + d3.event.translate + ')' + ' scale(' + d3.event.transform.k + ')');
}

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

在该示例中如何添加平移行为？

Answer 1

有几件事：

第一

d3.event.translate不保存变换x和y值，请使用d3.event.transform来获取这些值。转换对象具有x，y和k属性。

第二

如果使用.style()进行变换，则需要指定偏移量的像素单位：

var t = d3.event.transform;
d3.select("zoomedElement")
  .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');

或者，您可以使用.attr()而不使用px：

var t = d3.event.transform;
d3.select("zoomedElement")
  .style('transform', 'translate('+[t.x,t.y]+')scale(' + t.k + ')');

让我们看看这些改动（没有翻译范围）的帮助：

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
   var t = d3.event.transform;
  d3.select('svg').select('g')
    .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');


}

d3.select('svg')
  .select('rect')
  .call(zoom);

    .zoom-layer {
      fill: #EEE;
      fill-opacity: 0.25;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.0.0/d3.min.js"></script>
<svg width="300" height="300">
    <g>
      <circle cx=150 cy=150 r=20 style="fill:#F22"></circle>
      <rect x=0 y=0 width=300 height=300 class="zoom-layer"></rect>
    </g>
  </svg>

您可能想要选择一个不包含矩形的选择-应该保持相同，以便整个SVG表面保持交互性

第三

似乎要翻译的范围，有时设置起来有些棘手。 This的答案在缩放范围/平移范围上更深入，但我将介绍如何将您的圈子限制在屏幕上

以[0,0]的平移，您的圆位于svg的中间。如果我们翻译[-150，-150]，则您的圈子位于svg的左上角。如果圆心在cx = 150 cy = 150上居中，则可见区域的左上角现在为[150,150]。因此，右下角是[450,450]。可见范围是：[[150,150],[450,450]]。

平移[150,150]，您的圆在SVG的右下角。因为圆仍位于[150,150]，所以右下角位于[150,150] （这并不能使平移和圆位置在此处具有相同的值）。左上角在[-150,-150]。可见范围必须为：[[-150,-150],[150,150]]。

我们从可视范围限制中取极端，因为这是使圆保持可见的平移范围：

var translateExtent = [[-150,-150],[450,450]]

自然地，如果您在各个角落而不是在各个角落都拥有东西，那么您拥有更大的范围。

我们可以将所有内容应用于代码段：

var zoom = d3.zoom()
  .scaleExtent([1, 100])
  .translateExtent([[-150,-150],[450, 450]])
  .on('zoom', zoomFn);

  d3.select('svg')
  .select('g')
  .style("transform-origin", "50% 50% 0");

function zoomFn() {
   var t = d3.event.transform;
  d3.select('svg').select('g')
    .style('transform', 'translate('+t.x+"px,"+t.y + 'px)scale(' + t.k + ')');

  console.log(t.x,t.y)

}

d3.select('svg')
  .select('rect')
  .call(zoom);

    
    .zoom-layer {
      fill: #aaa;
      fill-opacity: 0.25;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="300" height="300">
    <g>
      <circle cx=150 cy=150 r=20 style="fill:#F22"></circle>
    </g>
    <rect x=0 y=0 width=300 height=300 class="zoom-layer"></rect>
  </svg>

D3添加缩放和平移

1 个答案: