使用 D3 v4、SVG 和缩放行为,在鼠标移动时,我想在 SVG 坐标系统中显示鼠标坐标。但是,mousemove 事件似乎只提供客户端/屏幕坐标。如何将这些坐标转换为反映当前缩放/平移等变换的 SVG 坐标?我可以看到使用轴/比例尺等的示例,但我没有创建图表,也没有使用轴/等-我正在使用 D3.js 进行交互式图解。我尝试了 crateSVGPoint/getScreenCTM 方法,但 (a) 我不太理解它,因此不确定如何将其应用到我的代码中,而且 (b) 当我缩放/平移时它似乎不起作用-我只得到客户端/屏幕坐标。例如:下面是我的 mousemove 事件中用于转换为 SVG 坐标的代码。
值得一提的是,缩放行为应用于SVG元素的SVG组元素。缩放工作正常;我可以看到平移/缩放应用于组上。
我尝试修改上述内容,对已经被转换的组元素调用createSVGPoint(),但会出现有关createSVGPoint()不是函数的错误;我猜这仅适用于来自DOM的SVG元素...
我正在使用的SVG元素还设置了viewBox,如果有区别的话。
肯定有一种简单的方法来进行转换,对吧?
var theSvg = document.getElementById('svgItem');
var pt = theSvg.createSVGPoint();
var cursorPoint = function(evt){
pt.x = evt.clientX; pt.y = evt.clientY;
return pt.matrixTransform(theSvg.getScreenCTM().inverse());
}
var loc = cursorPoint(d3.event);
//the pair of co-ordinates should be different on zoom, but aren't
d3.select(".statusBarText").text("move (" + d3.event.x + "," + d3.event.y + ") (" + loc.x + "," + loc.y + ")");
值得一提的是,缩放行为应用于SVG元素的SVG组元素。缩放工作正常;我可以看到平移/缩放应用于组上。
我尝试修改上述内容,对已经被转换的组元素调用createSVGPoint(),但会出现有关createSVGPoint()不是函数的错误;我猜这仅适用于来自DOM的SVG元素...
我正在使用的SVG元素还设置了viewBox,如果有区别的话。
肯定有一种简单的方法来进行转换,对吧?