我有一个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的正确值?
答案 0 :(得分:2)
根据this solution对类似的问题(这不是重复,相当),你需要:
foreignObject
SVG元素(允许在SVG中使用任意HTML)foreignObject
添加到组中,以及需要使用标签tranform
应用于论坛