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"));

Illative

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. – Semasiology

It looks like you could draw the nodes in pure HTML and then add arrows between them using something else. This question may help. – Semasiology

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.

Intercalary

Because having to write pixel layout management code that doesn't break horribly on page resize in JS is always fun. Honestly, best solution is to do what we've always done and pretend SVG doesn't exist. Use Canvas if you need to, that at least works in IE 9 and later. – Mabellemable

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

Lukewarm