SVG和D3.js在翻译后出现正确旋转的问题

在我执行以下操作后，我花了数小时试图找出如何获得正确的旋转中心点：

1） 将框拖动到屏幕中心附近的某个位置

2） 点击测试按钮，将盒子旋转90度

3） 将长方体拖动到其他位置

4） 再次点击测试按钮，再旋转90度（180度）

5） 生成的旋转和平移处于禁用状态。如果我将其旋转到0度并拖动长方体，然后点击测试按钮，它就可以正常旋转了。 请查看我的代码：

---

在此处输入code

如果选择正确的组元素以启用旋转，则更容易。假设您希望它围绕svg元素的中心旋转（即围绕十字线），您可以这样做

---

要点

• 变换

  container2

  so（0,0）位于旋转原点
  这意味着平移和旋转是解耦的
• 仅在

  移动路径中更改旋转

• 仅在缩放的

  中更改翻译

• 使用

  d3.transform

  管理转换元素
• 使用模运算符简化旋转计数器（

  %

  ）
• 将偏移量添加到rect的初始位置以进行推广

---

工作代码

var容器2；
var last_scale=1；
var last_rotation=[0,0,0]；
var last_translate=[0,0]；
变焦；
w=窗宽；
h=窗内高度；
var offsetx=w/4；
var offsety=h/4；
d3.选择（“#container3”）.attr（“转换”，函数（）{
var tr=d3.transform（d3.select（this.attr）（“transform”）；
return（tr.translate=[offsetx，offsety]，tr.toString（））
});
//document.getElementById（“mid_x”）.style.top=h/2+'px'；
//document.getElementById（“mid_y”）.style.left=w/2+“px”；
d3.选择（“测试”）样式({
顶部：h-50+“px”，
左：“10%。”
});
zoom=d3.behavior.zoom（）
.中心（[w/2，h/2]）
.scaleExtent（[1,10]）
。打开（“缩放”，缩放）；
var svg=d3。选择（“svg主”）
.attr（“宽度”，w）
.attr（“高度”，h）；
svg.append（“path”）.attr（“d”，“M”+[w/2，0]+“L”+[w/2，h]）样式({
笔画：“红色”
})
svg.append（“path”）.attr（“d”，“M”+[0，h/2]+“L”+[w，h/2]）样式({
笔画：“红色”
});
var container2=d3。选择（“#container2”）
.attr（“变换”、“平移”（+zoom.center（）+））
.呼叫（缩放），
//////////////////////////////////////////////////////////////////////////////////////////////////
//包括缩放和修复文本只是为了演示。。。
container3=container2.select（“#container3”）.attr（“transform”，function（））{
var tr=d3.transform（d3.select（this.attr）（“transform”）；
返回（tr.scale=[h/955，h/955]，tr.toString（））
});
container3.选择全部（“文本”）.style（“字体大小”（12*955/h）+“px”）.attr（“dy”、“0.35em”）；
//////////////////////////////////////////////////////////////////////////////////////////////////
var trans2=d3.transform（container2.attr（“transform”）；
container2.select（“#container3”）.attr（“transform”，function（））{
var tr=d3.transform（d3.select（this.attr）（“transform”）；
return（tr.translate=[offsetx-trans2.translate[0]，offsety-trans2.translate[1]]，tr.toString（））
})
d3.选择所有（“测试btn”）。打开（“单击”，移动路径）；
函数move_path（）{
上次旋转[0]=（上次旋转[0]+=90）%360；
container2.attr（“transform”，function（））{
var tr=d3.transform（d3.select（this.attr）（“transform”）；
返回（tr.rotate=last_rotation，tr.toString（））
});
}
函数缩放（）{
d3.选择（此）.selectAll（“g”）.attr（“转换”，函数）（）{
var trf=d3.transform（d3.select（this.attr）（“transform”），
trn=d3.event.translate；
返回（trf.translate=[offsetx-translate[0]+trn[0]，offsety-translate[1]+trn[1]]，trf.toString（））
})
}

svg{
显示：块；
溢出：可见；
背景#9F0；
轮廓：1px纯红；
}

缩放和旋转
偏移、拖动和全局缩放
顶部

我用d3 include更新了你的小提琴。JSFIDLE offeres版本已过时，且未通过https加载。使用下一次在“外部资源”下显示并添加的资源；）感谢您修复我的JSFIDLE:）感谢您的回复，旋转似乎是正确的，但是如果我在container3中添加另一组形状，则新的形状组不会同步拖动。如何将缩放/缩放功能重新包含进去？谢谢：）好吧，除非你指定缩放应该做什么，否则回答这个问题是不可能的。那么你想达到什么目的呢？你想让整个绿地保持相同的中心吗？您希望正方形以红色十字线为中心进行缩放吗？是否希望正方形相对于当前鼠标位置进行缩放？您需要指定…您好，我希望缩放在红色十字线上保持缩放。我正在尝试制作一个地图计划，允许用户拖动、缩放和旋转自定义地图。与此示例相同的缩放功能：缩放功能与您指定的不同。在链接中，缩放的恒定点是当前鼠标位置。您正在指定十字线为常量点。它们是不一样的：你想要哪一个？对不起，我认为它应该是相对于当前鼠标位置的。大多数情况下，贴图对象将占用整个屏幕空间。基本上与我在JSFIDLE中使用鼠标滚动时的方式相同。谢谢：）