Javascript d3 SVG拖放加旋转按钮

我正在尝试创建一个程序，在这个程序中，图像可以拖放，但也可以在按下按钮时旋转（在拖动图像并绕其自身的轴旋转之后）。我可以成功地进行图像拖放，但无法使旋转正常工作。我认为解决方案是在开始时使用“变换”、“平移”来定位图像；对于拖动而不是“d3.event”，但是我不确定如何做到这一点。我在d3库中使用SVG。我希望将我的：dragstarted、dragged和dragended分开，稍后将添加更多代码

var svgWidth=parseInt（document.getElementById（“canvas”）.getAttribute（“width”）， 选中=空； canvas=d3。选择（“#canvas”）； canvas.append（“图像”） .attr（'width'，17） .attr（'height'，59） .attr（“x”，svgWidth-40） .attr（“y”，100） .attr（“xlink:href，”https://lorempixel.com/100/100/cats") .call（d3.drag（） .on（“开始”，拖动开始） .打开（“拖动”，拖动） 。在（“结束”，dragended））； canvas.append（“图像”） .attr（'width'，80） .attr（'height'，38） .attr（“x”，svgWidth-90） .attr（“y”，200） .attr（“xlink:href，”https://lorempixel.com/100/100/sports") .call（d3.drag（） .on（“开始”，拖动开始） .打开（“拖动”，拖动） 。在（“结束”，dragended））； 函数dragstarted（d）{ d3.选择（this）.raise（）.classed（“活动”，true）； } 函数（d）{ d3.选择（本） .attr（“x”，d3.event.x-parseInt（d3.select（“image”）.attr（“width”）/2） .attr（“y”，d3.event.y-parseInt（d3.select（“image”）.attr（“height”）/2）； } 函数d（d）{ d3.选择（此）.classed（“活动”，false）； 选择=此； } window.onload=function（）{ document.getElementById（“旋转”）.addEventListener（“单击”，函数）（）{ 如果（已选择！=null）{ var x=selected.getAttribute（“x”）， y=选定的.getAttribute（“y”）； setAttribute（“变换”、“平移”（+x/2+）、“+y/2+”）+“旋转（90）”）； } }); }

测试
旋转

别担心，我把它修好了。没有意识到使用d3.event.x和d3.event.y不需要在图像上设置x和y值。这意味着我可以在拖动图像时在变换中使用这些值