Javascript SVG foreignObject元素的dagre-d3 IE解决方案?
我是一名本科生,目前正在为我的团队开发一个网页项目。一开始,我选择使用dagre-d3库来构建图形,它们在Chrome上运行良好。然后我意识到SVG中的ForeignObject元素在IE上不起作用(IE恰好是支持的主要浏览器) 由于我的目标基本上是在每个图形组件中填充HTML内容,我想知道是否有任何解决方法可以在仍然使用dagre-d3的IE上实现这一点。或者对其他图形库有什么建议 更新: 基本上,我想创建如下屏幕截图所示的图形: 下面是我现在使用dagre-d3构建图形的代码: HTML代码段:Javascript SVG foreignObject元素的dagre-d3 IE解决方案?,javascript,internet-explorer,svg,d3.js,dagre-d3,Javascript,Internet Explorer,Svg,D3.js,Dagre D3,我是一名本科生,目前正在为我的团队开发一个网页项目。一开始,我选择使用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'> </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"));
var g=new dagreD3.Digraph();
//构造节点
对于(var i=0;i ”;
label+=“Start:”+data.nodes[i].value.Start+“
”;
label+=“End:”+data.nodes[i].value.End+“
”;
label+=“由”+data.nodes[i].value.user+''启动;
标签+=“”;
g、 addNode(data.nodes[i].id,{label:label});
}
//构造边
对于(var j=0;j
我在我的硕士论文项目中大量使用了SVG和foreignObject
,这很好,因为它在Chrome和Firefox中运行良好。但我的解决方案/解决方案(即不支持foreignObject
)是使用分层布局。我将需要SVG的对象放在SVG层中,可以在HTML中创建的对象放在HTML层中(主要是带有文本的元素,这是HTML的“主基础”)
如果您需要许多元素相互重叠,那么它可能会变得有点复杂,因为svg不支持z索引(它使用元素顺序)。因此,您可能需要创建多个HTML/SVG层来解决这个问题。只需将各层精确地放在彼此的顶部,协调它们的位置就会变得容易。因为SVG对象是基于坐标放置的,所以您可以用相同的方式放置HTML元素(例如通过translate(…)
)
我没有使用dagre-d3,因此,如果这个答案不正确,我深表歉意。截至2015年4月29日,添加了
svg标签的功能(未使用foreignObject
)
请尝试此操作,而不要使用html标签
请参见演示:
请参阅提交:您实际上在做什么?如果你可以用HTML做任何事情,那么你就不需要foreignObject
。类似地,如果你能在SVG中做任何事情,你也不需要它。看起来你可以用纯HTML绘制节点,然后用其他东西在它们之间添加箭头。可能会有帮助。因为必须编写像素布局管理代码,在JS中调整页面大小时不会出现可怕的破坏,这总是很有趣的。老实说,最好的解决方案是做我们一直做的事情,假装SVG不存在。如果需要,请使用画布,这至少在IE9及更高版本中有效。