dagre-d3
dagre-d3 copied to clipboard
Published
20 hours ago •
dagrejs
dagrejs
svg label disappears after rendering again
Nodes with svg labels are displayed correctly after rendering for the first time but when I render the graph again the label from every node, that has been rendered before (new nodes are rendered fine), disappears. Is there any way for me to fix this?
Short example of this issue: https://jsfiddle.net/svoefz7m/
<!DOCTYPE html>
<html>
<head>
<script src="lib/d3/d3.min.js"></script>
<script src="lib/dagre/dagre-d3.min.js"></script>
<style type="text/css">
.node rect {
stroke: #999;
fill: #fff;
stroke-width: 1.5px;
}
svg {
border: 1px solid black;
}
</style>
</head>
<body>
<script>
//######################################################
//setup
var width = 500;
var height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var inner = this.svg.append("g");
var render = new dagreD3.render();
var g = new dagreD3.graphlib.Graph().setGraph({});
g.graph().transition = function transition(selection) {
return selection.transition().duration(1000);
};
//######################################################
//svg label from demo
svg_label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan');
tspan.setAttributeNS('http://www.w3.org/XML/1998/namespace', 'xml:space', 'preserve');
tspan.setAttribute('dy', '1em');
tspan.setAttribute('x', '1');
link = document.createElementNS('http://www.w3.org/2000/svg', 'a');
link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://google.com/');
link.setAttribute('target', '_blank');
link.textContent = 'IE Capable link';
tspan.appendChild(link);
svg_label.appendChild(tspan);
//######################################################
//node + render
g.setNode(0, {
label: svg_label,
labelType: 'svg',
});
render(inner, g);
//######################################################
//re-render after 2 seconds
setTimeout(function(){
console.log("re-render");
render(inner, g);
}, 2000);
</script>
</body>
</html>
After a quick analysis it seems that the issue is in the create-nodes.js
16: svgNodes.selectAll("*").remove();
The remove() function will delete the node.label passed in the g.setNode, since it is the same DOM object.
A solution might be storing the SVG labels in a group and use the the
