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

【问题标题】：dagre-d3 IE workaround for SVG foreignObject element?用于 SVG foreignObject 元素的 dagre-d3 IE 解决方法？
【发布时间】：2013-12-29 23:49:42
【问题描述】：

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

【问题讨论】：

你实际上在做什么？如果你可以用 HTML 做任何事情，那么你就不需要foreignObject。同样，如果您可以在 SVG 中完成所有操作，那么您也不需要它。
看起来你可以用纯 HTML 绘制节点，然后使用其他东西在它们之间添加箭头。 This question 可能会有所帮助。

标签： javascript internet-explorer svg d3.js dagre-d3

【解决方案1】：

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

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

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

【讨论】：

因为在 JS 中编写不会严重破坏页面大小的像素布局管理代码总是很有趣。老实说，最好的解决方案是做我们一直在做的事情，并假装 SVG 不存在。如果需要，请使用 Canvas，这至少适用于 IE 9 及更高版本。

【解决方案2】：

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

试试这个而不是你的html-labels。

查看演示：http://cpettitt.github.io/project/dagre-d3/latest/demo/svg-labels.html

查看提交：https://github.com/cpettitt/dagre-d3/pull/158

【讨论】：