javascript - SVG foreignObject 元素的 dagre-d3 IE 解决方法？

Question

我是本科生合作社，目前正在为我的团队开发一个网页项目。一开始，我选择使用 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'>&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"));

Answer 1

我在我的硕士论文项目中大量使用了 SVG 和 foreignObject，这很好，因为它在 Chrome 和 Firefox 中运行良好。但我对这个问题的解决方案/解决方法(即 IE 不支持 foreignObject)是使用分层布局。我将需要 SVG 的对象放在 SVG 层中，而我可以在 HTML 中创建的对象放在 HTML 层中(主要是带有文本的元素，这是 HTML 的“主场”)。

如果您需要许多元素相互叠加，它可能会变得有点复杂，因为 svg 不支持 z-index(它使用元素顺序代替)。所以你可能需要创建多个 HTML/SVG 层来解决这个问题。只需将图层准确地叠放在一起，协调它们的位置就会变得很容易。由于 SVG 对象是根据坐标放置的，因此您可以以相同的方式放置 HTML 元素(例如通过 translate(...))

我没有使用过 dagre-d3，所以如果这个答案有偏差，我深表歉意。