javascript - dagre-d3 IE workaround for SVG foreignObject element? - Stack Overflow

admin管理员组

文章数量:1345186

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

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

• javascript
• internet-explorer
• svg
• d3.js
• dagre-d3

Share Improve this question Follow edited Jan 12, 2015 at 17:30 gaitat 12.6k55 gold badges5757 silver badges7878 bronze badges asked Dec 11, 2013 at 19:58 IT NewbieIT Newbie 12111 silver badge44 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 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

本文标签： javascriptdagred3 IE workaround for SVG foreignObject elementStack Overflow