计算 d3 图形节点的绝对位置答案

【问题标题】：Calculate absolute position for d3 graph nodes计算 d3 图形节点的绝对位置
【发布时间】：2015-06-17 23:02:52
【问题描述】：

我有一个 d3 强制布局。这个力布局中的每个节点都有一个标签，这是一个<div> 代码（里面可以有表格）并且应该一直跟随它。我将<div> 的位置定义为绝对位置，并将它们的位置设置为：

var updateNode = function() {
label_xOffset=10;
label_yOffset=10
this.attr("transform", function(d,i) {
    //this is where I set their position
    //d.num declare corresponding div in node_lables_divs array
    node_labels_divs[parseInt(d.num)].style("left",(d.x+label_xOffset)+"px").style("top",(d.y+label_yOffset)+"px");
    return "translate(" + d.x + "," + d.y + ")";
    });
}

function tick(e) {
     node.call(updateNode);
}

只要我不平移或放大我的 SVG，现在一切都很好。但我也需要这些功能。所以在我的缩放功能中，我是这样处理的：

var zoomer = d3.behavior.zoom().scaleExtent([0.1,10]).
    x(xScale).
    y(yScale).on("zoom", redraw);
function redraw() {
    var translation=" translate(" + d3.event.translate[0] + "px,"+d3.event.translate[1]+"px)";
    d3.selectAll("div.node_lables_html").style("transform",translation)
                                        .style("-webkit-transform",translation)
                                        .style("-ms-transform",translation);
     //vis is the <g> tag that contains the whole nodes and links
     vis.attr("transform","translate(" + d3.event.translate + ")"+" scale(" + d3.event.scale + ")");
}

现在，当我拖动和平移 SVG 时，一切都很好。但是当我尝试放大 SVG 时，这非常糟糕，标签朝着不同的方向前进并且它们没有跟随节点。我打印出d3.event.translate，它似乎在缩放和平移时具有不同的比例。我也尝试了 d3 foreignElement，但似乎 transform 属性不适用于 foreignElements。我应该如何计算正确的值来转换 htmls？

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

根据this solution 的类似问题（完全不是重复的），您需要：

将 div 放入 foreignObject SVG 元素（允许在 SVG 中使用任意 HTML）
将foreignObject 以及其他需要与标签一起使用的内容添加到组中
仅将tranforms 应用于组

【讨论】：

我没有单独创建它们，而是将它们放在一个外部对象中，节点位于标记中。现在它正在工作。
乐于助人。喜欢我的回答吗？
此代码适用于 Firefox。我用 Chrome 尝试过，显示了异物，但转换不适用于它们。你有什么办法解决这个问题吗？
对我来说听起来像是一个新问题。作为一般规则，只有澄清应该放在 cmets 中。作为一个新问题提出这个问题并链接到这个问题。