我是一名本科生合作社，目前正在为我的团队开发一个网页项目。一开始，我选择使用 dagre-d3 库来构建图形，它们在 Chrome 上运行良好。然后我意识到 SVG 中的 ForeignObject 元素在 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"));