D3转换比例并保持位置不变

Question

我想拖动d3中的一组元素，但是当鼠标放在操作符上时，我还需要缩放组。

当我缩放组时，它会改变它的位置，是否可以缩放它，而它的位置在svg中是不变的？我的工作是fiddle。

<svg width="400" height="400" style="background-color: red"> 

    <g id="op" class="operator"> 

     <circle cx="50" cy="50" r="20" style="fill: yellow"></circle> 

    </g> 

</svg> 

的script.js

d3.selectAll('.operator') 
     .on('mouseenter', function() { 

      console.log('Mouse Enter'); 
      d3.select(this).attr('transform', 'scale(2)'); 

     }) 
     .on('mouseleave', function() { 

      console.log('Mouse Leave'); 

     }) 
     .call(d3.behavior.drag() 
     .on('drag', function() { 

      d3.select(this).attr('transform', 'translate(' +       d3.event.x + ',' + d3.event.y + ')'); 

     }) 

     ) 

Answer 1

当你这样做的2

规模如果CX为50和cy是50，然后在秤2圆将出现在center cx * scale = 100和cy * scale = 100。

这就是它在规模上跳跃的原因。现在如果你想圆是在同一个地方，你需要做的是这样的：

d3.select(this).select("circle").attr("cx", 50/scale) 
d3.select(this).select("circle").attr("cy", 50/scale) 

除以规模，这将抵消为圆心的规模效应。

所以后缩放的新Cx和Cy将是25

工作代码here。