我是一名大学合作社,目前正在为我的团队开发一个网页项目.一开始,我选择使用dagre-d3库来构建图形,它们在Chrome上运行良好.然后我意识到SVG中的ForeignObject元素不能用于IE(它恰好是支持的主要浏览器).
由于我的目标主要是在每个图形组件中填充HTML内容,我想知道是否有任何解决方法在IE上仍然使用dagre-d3实现这一点.或者对不同图库的任何建议?
更新:
基本上我想创建下面屏幕截图中显示的图表:
下面是我现在使用dagre-d3构建图形的代码:
HTML代码段:
JS片段:
var g = new dagreD3.Digraph(); // Construct nodes for (var i = 0; i < data.nodes.length; i++) { var label = ""; label += ""; 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"));"; label += " " + data.nodes[i].value.name + "
"; label += "Start: " + data.nodes[i].value.start + "
"; label += "End: " + data.nodes[i].value.end + "
"; label += "Launched by " + data.nodes[i].value.user + ""; label += "
swenedo.. 5
我foreignObject
在硕士论文项目中使用了SVG ,这很好,因为它在Chrome和Firefox中运行良好.但我对该问题的解决方案/解决方法(即IE不支持foreignObject
)是使用分层布局.我将需要SVG的对象放在SVG层中,并且我可以用HTML创建的对象放在HTML层中(大多数是带有文本的元素,这是HTML的"本地").
如果你需要很多元素,它可能会变得有点复杂,因为svg不支持z-index(它使用元素顺序代替).因此,您可能需要创建多个HTML/SVG图层来解决这个问题.只需将各层准确地放在彼此之上,协调它们的位置就会变得容易.由于SVG对象是基于坐标放置的,因此您可以以相同的方式放置HTML元素(例如,通过translate(...)
)
我没有使用过dagre-d3,所以如果这个答案没有用,我会道歉.