私は大学生協で、現在チームの Web ページ プロジェクトを開発しています。最初に、dagre-d3 ライブラリを使用してグラフを作成することにしましたが、Chrome で問題なく動作しました。次に、SVG の ForeignObject 要素が IE で機能しないことに気付きました (IE はたまたまサポートする主要なブラウザーです)。
私の目標は本質的に各グラフ コンポーネントに HTML コンテンツを入力することなので、まだ dagre-d3 を使用している IE でこれを実装するための回避策があるかどうか疑問に思っていました。または、別のグラフ ライブラリの推奨事項はありますか?
アップデート：
基本的に、下のスクリーンショットに示すグラフを作成したかったのです。
以下は、dagre-d3 を使用してグラフを作成するために現在使用しているコードです。
HTML スニペット:
<div id="graph-section">
<svg>
<g transform="translate(20,20)" />
</svg>
</div>
JS スニペット:
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"));