用于SVG foreignObject元素的dagre-d3 IE解决方法？ [英] dagre-d3 IE workaround for SVG foreignObject element?
问题描述
我是一名大学合作社，目前正在为我的团队开发一个网页项目。一开始，我选择使用dagre-d3库来构建图形，它们在Chrome上运行良好。然后我意识到SVG中的ForeignObject元素不适用于IE（它恰好是支持的主要浏览器）。
I'm an undergrad co-op and am currently developing a webpage project for my team. In the beginning, I chose to use dagre-d3 library to construct graphs, and they work fine on Chrome. Then I realize that ForeignObject element in SVG doesn't work on IE (which happens to be the primary browser to support).
由于我的目标主要是填充每个图形组件中的HTML内容，我想知道是否有任何解决方法在IE上仍然使用dagre-d3实现这一点。或者对不同图表库的任何建议？
Since my goal is essentially to populate HTML content in each graph component, I was wondering if there was any workaround to implement this on IE still using dagre-d3. Or any recommendations for a different graph library?
更新：
基本上我想创建图中所示的图表截图如下：
Essentially I wanted to create graph shown in the screenshot below:
下面是我现在使用dagre-d3构建图形的代码：
Below is the code I use now to construct the graph using 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"));
推荐答案
我使用了SVG和 foreignObject 主要在我的硕士论文项目中，这很好，因为它在Chrome和Firefox中运行良好。但我对该问题的解决方案/解决方法（即IE不支持 foreignObject ）是使用分层布局。我将需要SVG的对象放在SVG层中，并且我可以用HTML创建的对象放在HTML层中（主要是带有文本的元素，这是HTML的本地）。
I used SVG and foreignObject heavily in my master thesis project, which was fine because it worked fine in Chrome and Firefox. But my solution/workaround to the issue (i.e. IE not supporting foreignObject), was to use a layered layout. I placed the objects that required SVG in a SVG layer and the objects I could create in HTML I put in an HTML layer (mostly elements with text, which is HTML's "home ground").
如果你需要很多元素，它可能会有点复杂，因为svg不支持z-index（它使用元素顺序代替）。因此，您可能需要创建多个HTML / SVG图层来解决这个问题。只需将各层准确地放在彼此之上，协调它们的位置就会变得容易。由于SVG对象是基于坐标放置的，因此您可以以相同的方式放置HTML元素（例如，通过 translate（...））
It might get a little complex if you need many elements on top of each other, because svg doesn't support z-index (it uses elements order instead). So you might need to create multiple HTML/SVG layers to solve that. Just place the layers exactly on top of each other, and coordinating their positions will get easy. Since SVG objects is placed based on coordinates, you can just place the HTML elements the same way (e.g by translate(...))
我没有使用过 dagre-d3 ，所以如果这个答案没有用，我会道歉。
I have not used dagre-d3, so I apologize if this answer is way off.
这篇关于用于SVG foreignObject元素的dagre-d3 IE解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
