我有一个 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
并且看起来它在缩放和平移时具有不同的比例。
我还尝试了 d3foreignElement,但似乎转换属性不适用于foreignElements。我应该如何计算正确的值来转换 html?
最佳答案
根据 this solution对于类似的问题(它不是重复的,相当),您需要:
- 将 div 放入
foreignObject
SVG 元素(允许 SVG 中包含任意 HTML) - 将
foreignObject
添加到组中,以及需要与标签一起使用的任何其他内容 - 仅将
转换
应用于组
关于javascript - 计算 d3 图节点的绝对位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30903921/