javascript - 使用 Javascript 设置 的转换翻译

Question

我为改造设置的<g>是

const svg = d3.select('target-svg')
const g = d3.select('target-g')

svg.call(d3.zoom().on('zoom', () => {
    g.attr('transform', d3.event.transform)
})

现在，我正在尝试设置 <g> 的 transform 属性使用以下示例 javascript 代码的 svg 标记。

g.attr('transform', 'translate(100, 100) scale(1)')

问题是<g>标签翻译得很好但是当使用鼠标滚轮放大和缩小时，<g>被平移到原始位置。

例如，如果<g>的平移原点坐标是 (0, 0)，我将它翻译成 (100, 100)，<g>的 (x, y) 位于 (100, 100)。但是当我放大它时，<g>回到 (0, 0)。

我怎样才能阻止它？

Answer 1

D3 缩放行为不会跟踪元素的变换属性 - 毕竟，缩放行为可能不会改变它(在 Canvas 上缩放、缩放时更改颜色或形状、数据的粒度、将缩放应用于不同的元素而不是一个元素触发事件等)。

当您使用 d3.event.transform 应用转换时，您正在应用当前缩放转换，它以 [0,0] 的转换和缩放开始1。换句话说，除非您另外指定，否则具有 d3 缩放行为的默认初始缩放事件将始终与此初始状态相关。这就是缩放与手动设置元素的变换值无关的原因。

要统一手动设置的变换属性和缩放行为的变换，请使用缩放来管理两者。您可以使用缩放行为手动设置 g 的 transform 属性:

var transform = d3.zoomIdentity.translate([100,100]).scale(1);
svg.call(zoom.transform, transform);

第一行操作一个 d3 缩放标识来创建一个新的转换。第二行应用它，在过程中调用一个缩放事件，该事件触发一个 zoom.on 事件。

通过这种方法，缩放管理手动变换和基于事件的变换的使用，因此缩放永远不会过时或“不知道”当前应用于选择的变换。

总的来说，这可能看起来像:

var svg = d3.select('body')
  .append('svg')
  .attr('width',500)
  .attr('height',400)
var g = svg.append('g');

var rect = g.append('rect')
  .attr('x', 750) 
  .attr('y', 100)
  .attr('height',50)
  .attr('width',50);

var zoom = d3.zoom()
  .on('zoom', function() {
  g.attr('transform',d3.event.transform);  
  })

var initialTransform = d3.zoomIdentity
  .translate(-700,-40)
  
svg.call(zoom);
svg.call(zoom.transform,initialTransform);

<script src="https://d3js.org/d3.v5.min.js"></script>