d3.js - 获取变换后 D3 节点的屏幕位置

Question

在布局被 d3.behavior.zoom() 转换后，我试图获取节点的屏幕位置，但我运气不佳。翻译和缩放布局后，如何获取节点在窗口中的实际位置？

mouseOver = function(node) {
  screenX = magic(node.x); // Need a magic function to transform node
  screenY = magic(node.y); // positions into screen coordinates.
};

任何指导将不胜感激。

编辑:上面的“节点”是一个强制布局节点，所以它的 x 和 y 属性由模拟设置，并且在模拟停止后保持不变，无论应用什么类型的变换。

编辑:我用来转换 SVG 的策略来自 d3 的缩放行为，此处概述: SVG Geometric Zooming .

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .call(d3.behavior.zoom().scaleExtent([1, 8]).on("zoom", zoom))
  .append("g");

svg.append("rect")
    .attr("class", "overlay")
    .attr("width", width)
    .attr("height", height);

svg.selectAll("circle")
    .data(data)
  .enter().append("circle")
    .attr("r", 2.5)
    .attr("transform", function(d) { return "translate(" + d + ")"; });

function zoom() {
  svg.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

这很简单。 d3 的缩放行为将平移和缩放事件传递给处理程序，该处理程序通过 transform 属性将变换应用于容器元素。

编辑:我正在通过使用鼠标坐标而不是节点坐标来解决这个问题，因为当用鼠标指针悬停在节点上时，我对节点位置感兴趣。这不完全是我所追求的行为，但它在大多数情况下都有效，而且总比没有好。

编辑:解决方案是使用 element.getCTM() 获取 svg 元素的当前转换矩阵，然后使用它将 x 和 y 坐标偏移到屏幕相对状态。见下文。

Answer 1

看来我原来的问题的解决方案是这样的:

(更新为支持旋转变换。)

// The magic function.
function getScreenCoords(x, y, ctm) {
    var xn = ctm.e + x*ctm.a + y*ctm.c;
    var yn = ctm.f + x*ctm.b + y*ctm.d;
    return { x: xn, y: yn };
}

var circle = document.getElementById('svgCircle'),
cx = +circle.getAttribute('cx'),
cy = +circle.getAttribute('cy'),
ctm = circle.getCTM(),
coords = getScreenCoords(cx, cy, ctm);
console.log(coords.x, coords.y); // shows coords relative to my svg container

或者，这也可以使用 d3.event 中的 translate 和 scale 属性来完成(如果不需要旋转变换):

// This function is called by d3's zoom event.
function zoom() {

// The magic function - converts node positions into positions on screen.    
function getScreenCoords(x, y, translate, scale) {
    var xn = translate[0] + x*scale;
    var yn = translate[1] + y*scale;
    return { x: xn, y: yn };
}

// Get element coordinates and transform them to screen coordinates.
var circle = document.getElementById('svgCircle');
cx = +circle.getAttribute('cx'),
cy = +circle.getAttribute('cy'),
coords = getScreenCoords(cx, cy, d3.event.translate, d3.event.scale);
console.log(coords.x, coords.y); // shows coords relative to my svg container

  // ...
}

编辑:我发现以下形式的函数是最有用和最通用的，它似乎在 getBoundingClientRect摔倒。更具体地说，当我试图在 D3 强制布局项目中获得准确的 SVG 节点位置时， getBoundingClientRect产生不准确的结果，而以下方法返回 circle元素在多个浏览器中的确切中心坐标。

(更新为支持旋转变换。)

// Pass in the element and its pre-transform coords
function getElementCoords(element, coords) {
    var ctm = element.getCTM(),
    x = ctm.e + coords.x*ctm.a + coords.y*ctm.c,
    y = ctm.f + coords.x*ctm.b + coords.y*ctm.d;
    return {x: x, y: y};
};

// Get post-transform coords from the element.
var circle = document.getElementById('svgCircle'),
x = +circle.getAttribute('cx'),
y = +circle.getAttribute('cy'),
coords = getElementCoords(circle, {x:x, y:y});

// Get post-transform coords using a 'node' object.
// Any object with x,y properties will do.
var node = ..., // some D3 node or object with x,y properties.
circle = document.getElementById('svgCircle'),
coords = getElementCoords(circle, node);

该函数的工作原理是获取 DOM 元素的变换矩阵，然后使用矩阵旋转、缩放和平移信息返回给定节点对象的变换后坐标。