获取变换后 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 元素的变换矩阵，然后使用矩阵旋转、缩放和平移信息返回给定节点对象的变换后坐标。

Answer 2

您可以尝试node.getBBox() 在应用任何transform 后获取节点形状周围紧密边界框的像素位置。更多信息请看这里：link。

编辑：

getBBox 不像我想象的那样工作。由于矩形是根据转换后的坐标空间定义的，因此它始终相对于父 <g>，因此对于包含的形状将始终相同。

还有另一个名为element.getBoundingClientRect 的函数似乎得到了广泛的支持，它返回相对于浏览器视口左上角的像素位置的矩形。这可能会让你更接近你想要的，而无需直接弄乱变换矩阵。