dagre-d3 IE-Problemumgehung für SVG foreignObject-Element?
Ich bin eine Undergrad-Genossenschaft und entwickle derzeit ein Webseitenprojekt für mein Team. Am Anfang habe ich mich für die Verwendung der dagre-d3-Bibliothek entschieden, um Diagramme zu erstellen. Diese funktionieren in Chrome einwandfrei. Dann stelle ich fest, dass das ForeignObject-Element in SVG nicht im Internet Explorer (dem primären Browser, der unterstützt wird) funktioniert.
Da mein Ziel im Wesentlichen darin besteht, HTML-Inhalte in jede Grafikkomponente einzufügen, habe ich mich gefragt, ob es eine Problemumgehung gibt, um dies auf IE zu implementieren, das immer noch dagre-d3 verwendet. Oder irgendwelche Empfehlungen für eine andere Grafikbibliothek?
AKTUALISIEREN:
Im Wesentlichen wollte ich eine Grafik erstellen, die im folgenden Screenshot gezeigt wird:
Unten ist der Code, den ich jetzt benutze, um das Diagramm mit dagre-d3 zu konstruieren:
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'> </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"));