gpt4 book ai didi

javascript - d3.js-翻译后如何添加

转载 作者:行者123 更新时间:2023-12-03 08:26:52 25 4
gpt4 key购买 nike

我正在尝试添加新的<circle>之后<g>被翻译了。circle坐标我正在尝试使用鼠标事件 mousedown函数得到在翻译之前协调我可以正确添加 <circle>在 mousedown 坐标中但翻译后 <g>我无法正确添加 <circle>在鼠标按下的坐标中。

所以我想在<g>之后已翻译,我需要重新定义新坐标。但我只是不知道该怎么做!

这是我的代码(我使用鼠标右键添加圆圈):
JSbin

最佳答案

您需要找到相对于组平移的鼠标位置。

  var point = document.getElementById('root').createSVGPoint();
point.x = event.pageX;//mouse position X
point.y = event.pageY;//mouse position Y
var newPoint = point.matrixTransform(container.node().getCTM().inverse());
//newPoint is the place where you will need to draw the circle
container.append('g')
.append('circle')
.attr('cx', newPoint.x)
.attr('cy', newPoint.y)
.attr('r', '20');

工作代码here

希望这有帮助!

关于javascript - d3.js-翻译<g>后如何添加<circle>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33512926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com