Internet Explorer 10没有显示svg路径(d3.js图)

Question

如果我打开这个图例如: IE10中的http://bl.ocks.org/mbostock/1153292,我就是看不到节点之间的链接.

我能在代码中做些什么,甚至可以用Internet Explorer查看吗？

似乎IE只是忽略了svg的一些部分......我找不到任何方法让它可见.

Answer 1

摘要:

IE中存在一个错误,导致带有标记的路径呈现不正确.删除了标记的原始代码可以毫无问题地呈现.

有三种解决方案:

1. 不要使用标记
2. 将标记嵌入路径中,如下所示:http://jsfiddle.net/niaconis/3YsWY/9/
3. 等待Microsoft修复此错误

选项2虽然有点难看,但可能是最可行的.

原帖:

不幸的是,我发现詹姆斯的回答只适用于静态svg.

我从原始示例中提取了css和javascript并将它们放在jsfiddle中.这些链接在Chrome 26中正确显示(这是我的控制测试),但在IE 10中根本没有显示(正如预期的那样).然后我根据James给出的答案编辑了处理链接创建的javascript:

var path = svg.append("svg:g")
    .attr("fill", function(d) { return "none"; }) /*new*/
    .attr("stroke-width", function(d) { return "1.5px"; }) /*new*/
    .attr("stroke", function(d) { return "#666"; }) /*new*/
    .selectAll("path")
    .data(force.links())
    .enter().append("svg:path")
    .attr("class", function(d) { return "link " + d.type; })
    .attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

这确实为<g>元素添加了指定的属性,但对"实时"图形的显示没有影响.(现在检查回来,我注意到在IE10的"静态"图显示的链接,即使没有所看到这些属性在这里.)

通过使用IE的开发人员工具栏,我能够在IE10中显示链接(甚至直接在原始示例中).我<path>在DOM中找到了一个标签,然后在右侧的"样式"选项卡中取消选中并重新检查"path.link"样式.

这将获得要显示的链接,但随后与图形的任何交互都会断开标记与链接末端的连接.他们只是留在原地,我发现什么都不会让他们重新连接.

我能找到的唯一相关的信息来源就是这样的帖子:在我通过开发人员工具栏编辑之前,元素不会出现在IE7中
但是,我对svg来说相当新,所以我没有丝毫想法如何将那里描述的修复程序移植到svg(该修复程序用于html元素)

也许这会帮助某些人朝着正确的方向前进？

PS我知道这不是一个答案,我本来只是把这个作为詹姆斯回答的答案,但似乎我没有足够的声誉来做到这一点.= \

更新:

事实证明,这个问题完全与标记有关.这个小提琴是原始代码,但删除了标记,链接显示就好了.之前已经记录了标记问题,这是IE10的一个严重错误.为什么它也会导致链接消失,我不知道.

这个小提琴提供了解决方法.这不是最干净的解决方案,因为我已经在链接的路径中直接编码每个标记,但它可以工作.

如果任何人都可以找到标记问题本身的解决方法,那就更好了,它还应该作为另一个标记问题的答案发布.

(另请注意:我的解决方案使得虚线链接看起来很糟糕,所以我将它们变成浅蓝色.)

已向Microsoft报告此错误,但到目前为止,它们似乎已拒绝或忽略它.请转到Microsoft的问题跟踪器网站上的此帖子,然后单击指示您可以重现此错误的链接.也许我们可以引起他们的注意？

Answer 2

在其他标记问题已经由基督教隆德这为我工作得非常好了绝佳的答案.

为了省去去那里的麻烦,以下是事情的要点:

在我的力量动画中,我有一个tick看起来像这样的函数:

force.on("tick", function() {
  ...
});

我还在link变量中保存了所有图形链接,定义如下:

var link = svg.selectAll(".link").data(links).enter() ...

现在,为了实现Christian提出的魔力,我在tick函数的开头添加了这一行:

force.on("tick", function() {
  link.each(function() {this.parentNode.insertBefore(this, this); });
  ...
});

我完整地留下了所有标记.这个小小的奇迹是什么,是遍历动画的每个滴答的所有链接节点,并将它们重新添加到DOM.这会导致IE 10重新渲染它们,并且这一切对世界都很好.

这似乎解决了IE 10的问题......当然,建议仅在IE 10上添加此补丁

如果这适用于你,你不要忘记去另一个问题并给基督徒一个赞成