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