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

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

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缩放行为不会跟踪元素的变换属性-毕竟，缩放行为可能不会改变它（在画布上缩放，缩放时更改颜色或形状，数据的粒度，将缩放应用于其他元素而不是一个元素）触发事件等）。

使用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事件，该事件触发一次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>

使用Javascript设置<g>的转换转换

1 个答案: