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

Question

我是一名大学合作社，目前正在为我的团队开发一个网页项目。一开始，我选择使用dagre-d3库来构建图形，它们在Chrome上运行良好。然后我意识到SVG中的ForeignObject元素不适用于IE（它恰好是支持的主要浏览器）。

由于我的目标主要是在每个图形组件中填充HTML内容，我想知道是否有任何解决方法在IE上仍然使用dagre-d3实现这一点。或者对不同图表库的任何建议？

更新：

基本上我想创建下面屏幕截图中显示的图表：

下面是我现在使用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 ，所以如果这个答案没有用，我道歉。

Answer 2

截至2015年4月29日，我们添加了svg-labels（未使用foreignObject）的功能。

尝试使用此代替html-labels。

请参阅演示：http://cpettitt.github.io/project/dagre-d3/latest/demo/svg-labels.html

请参阅commit：https://github.com/cpettitt/dagre-d3/pull/158