I am using d3.js to visualize a graph with nodes and edges. I used foreignObject tag for implementing custom labels for nodes. This is my code for adding foreinObjects to the nodes.
node.append("svg:g").attr("x",12).attr("y",".31em").attr("pointer-events","none").append("svg:foreignObject")
.attr("width",400).attr("height",400).append("xhtml:body").style("background-color","transparent").append("xhtml:div").attr("class","node_lables_html").html(function(d,i){
return node_labels_html[parseInt(d.num)];
});
This is how it looks in the html. This is a html code for one node:
<g transform="translate(130.53028822246984,182.7303426183812)">
<circle style="fill: rgb(31, 119, 180);" r="7" class="node node8"></circle>
<g pointer-events="none" y=".31em" x="12">
<foreignObject height="400" width="400">
<body style="background-color: transparent;">
<div style="display: inline-block;" class="node_lables_html">
<table style="font-size: 18px">
<tbody><tr>
<td>
port
</td>
</tr>
</tbody></table>
</div></body></foreignObject></g></g>
I also have zooming and panning feature enabled in my SVG. There is <g> tag which contain all the nodes and edges and transform them accordingly. Everything works perfectly in Firefox. But when I tried it in Google Chrome the labels are just showing and not moving with the nodes. Does Chrome support transforming foreignObjects?