I'm an undergrad co-op and am currently developing a webpage project for my team. In the beginning, I chose to use dagre-d3 library to construct graphs, and they work fine on Chrome. Then I realize that ForeignObject element in SVG doesn't work on IE (which happens to be the primary browser to support).
Since my goal is essentially to populate HTML content in each graph ponent, I was wondering if there was any workaround to implement this on IE still using dagre-d3. Or any remendations for a different graph library?
UPDATE:
Essentially I wanted to create graph shown in the screenshot below:
Below is the code I use now to construct the graph using dagre-d3:
HTML Snippet:
<div id="graph-section">
<svg>
<g transform="translate(20,20)" />
</svg>
</div>
JS Snippet:
var g = new dagreD3.Digraph();
// Construct nodes
for (var i = 0; i < data.nodes.length; i++) {
var label = "<div class='graphLabel'>";
label += "<div class='p" + data.nodes[i].value.type + " left'> </div>";
label += "<b> " + data.nodes[i].value.name + "</b><br/>";
label += "<span class='info'>Start: " + data.nodes[i].value.start + "</span><br/>";
label += "<span class='info'>End: " + data.nodes[i].value.end + "</span><br/>";
label += "<span class='info'>Launched by " + data.nodes[i].value.user + "</span>";
label += "</div>";
g.addNode(data.nodes[i].id, { label: label });
}
// Construct edges
for (var j = 0; j < data.links.length; j++) {
g.addEdge(null, data.links[j].start, data.links[j].end);
}
var layout = renderer.run(g, d3.select("#graph-section svg g"));
I'm an undergrad co-op and am currently developing a webpage project for my team. In the beginning, I chose to use dagre-d3 library to construct graphs, and they work fine on Chrome. Then I realize that ForeignObject element in SVG doesn't work on IE (which happens to be the primary browser to support).
Since my goal is essentially to populate HTML content in each graph ponent, I was wondering if there was any workaround to implement this on IE still using dagre-d3. Or any remendations for a different graph library?
UPDATE:
Essentially I wanted to create graph shown in the screenshot below:
Below is the code I use now to construct the graph using dagre-d3:
HTML Snippet:
<div id="graph-section">
<svg>
<g transform="translate(20,20)" />
</svg>
</div>
JS Snippet:
var g = new dagreD3.Digraph();
// Construct nodes
for (var i = 0; i < data.nodes.length; i++) {
var label = "<div class='graphLabel'>";
label += "<div class='p" + data.nodes[i].value.type + " left'> </div>";
label += "<b> " + data.nodes[i].value.name + "</b><br/>";
label += "<span class='info'>Start: " + data.nodes[i].value.start + "</span><br/>";
label += "<span class='info'>End: " + data.nodes[i].value.end + "</span><br/>";
label += "<span class='info'>Launched by " + data.nodes[i].value.user + "</span>";
label += "</div>";
g.addNode(data.nodes[i].id, { label: label });
}
// Construct edges
for (var j = 0; j < data.links.length; j++) {
g.addEdge(null, data.links[j].start, data.links[j].end);
}
var layout = renderer.run(g, d3.select("#graph-section svg g"));
-
What are you actually doing? If you can do everything with HTML, then you wouldn't need
foreignObject. Similarly, if you can do everything in SVG, you wouldn't need it either. – Lars Kotthoff Commented Dec 11, 2013 at 20:23 - It looks like you could draw the nodes in pure HTML and then add arrows between them using something else. This question may help. – Lars Kotthoff Commented Dec 11, 2013 at 21:17
2 Answers
Reset to default 6I used SVG and foreignObject heavily in my master thesis project, which was fine because it worked fine in Chrome and Firefox. But my solution/workaround to the issue (i.e. IE not supporting foreignObject), was to use a layered layout. I placed the objects that required SVG in a SVG layer and the objects I could create in HTML I put in an HTML layer (mostly elements with text, which is HTML's "home ground").
It might get a little plex if you need many elements on top of each other, because svg doesn't support z-index (it uses elements order instead). So you might need to create multiple HTML/SVG layers to solve that. Just place the layers exactly on top of each other, and coordinating their positions will get easy. Since SVG objects is placed based on coordinates, you can just place the HTML elements the same way (e.g by translate(...))
I have not used dagre-d3, so I apologize if this answer is way off.
As of april 29 2015 the functionality for svg-labels (not using foreignObject) was added.
Try this instead of your html-labels.
See demo: http://cpettitt.github.io/project/dagre-d3/latest/demo/svg-labels.html
See mit: https://github./cpettitt/dagre-d3/pull/158