dagre-d3 IE workaround for SVG foreignObject element?

Question

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 component, I was wondering if there was any workaround to implement this on IE still using dagre-d3. Or any recommendations 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='comp" + data.nodes[i].value.type + " left'>&nbsp;</div>";
    label += "<b>&nbsp;" + 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"));

Answer 1

I 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 complex 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.

Answer 2

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 commit: https://github.com/cpettitt/dagre-d3/pull/158