20

例如，如果我在 IE10 中打开此图：http : //bl.ocks.org/mbostock/1153292，我只是看不到节点之间的链接。

我可以在代码中做些什么来让即使使用 Internet Explorer 也能看到？

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

4

3 回答 3

29

概括：

IE中有一个错误会导致带有标记的路径无法正确呈现。删除标记的原始代码呈现没有问题。

有三种解决方案：

  1. 不要使用标记
  2. 像这样在路径中嵌入标记：http: //jsfiddle.net/niaconis/3YsWY/9/
  3. 等待微软修复此错误

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

原帖：

不幸的是，我发现詹姆斯的答案只适用于静态 svg。

我从原始示例中提取了 css 和 javascript 并将它们放在 jsfiddle 中。链接在 Chrome 26 中正确显示（这是我的控制测试），但在 IE 10 中根本没有显示（如预期的那样）。然后我根据詹姆斯给出的答案编辑了处理链接创建的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”样式。

这会显示链接，但随后与图表的任何交互都会断开标记与链接末端的连接。它们只是留在原地，我没有发现任何东西可以让它们重新连接。

我能找到的唯一相关信息来源是这个 SO 帖子：Element doesn't appear in IE7 until I edit it through Developer Toolbar
但是，我对 svg 还很陌生，所以我一点也不知道如何将那里描述的修复移植到 svg（该修复是针对 html 元素的）

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

PS我知道这不完全是一个答案，我只是将其发布为对詹姆斯答案的回复，但似乎我没有足够的声誉来做到这一点。=\

更新：

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

这个小提琴提供了一种解决方法。这不是最干净的解决方案，因为我已将每个标记直接编码到其链接路径中，但它可以工作。

如果有人可以找到标记问题本身的解决方法，那就更好了，并且应该另外将其发布为其他标记问题的答案。

（另请注意：我的解决方案使虚线链接看起来很糟糕，所以我将它们改为浅蓝色。）

这个错误已经报告给微软，但到目前为止他们似乎已经否认或忽略了它。请转到Microsoft 问题跟踪器网站上的此帖子，然后单击指示您可以重现此错误的链接。也许我们可以引起他们的注意？

于 2013-05-08T21:27:07.827 回答
11

另一个标记问题由 Christian Lund 提供了一个很好的答案，这对我非常有效。

为了省去你去那里的麻烦，这里是事情的要点：

在我的力动画中，我有一个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 上添加此补丁

如果这对您有用，请不要忘记转到另一个问题并给克里斯蒂安投赞成票

于 2013-08-27T20:39:48.793 回答
0

我不确定这是否已经解决，但在我比较的所有浏览器中，该图看起来几乎与我相同。我没有 IE10，但在 IE9 中看起来不错，我在NetRenderer 的IE10 上测试了图形的静态副本，看起来也不错。

我能看到的唯一区别是 IE 没有为某些链接显示实心箭头，只需为这些标记类型设置填充样式即可轻松解决。

marker#suit {
  fill: black;
}
marker#resolved {
  fill: black;
}

更新：

查看您添加的图像，这绝对不是我在 IE9 或 NetRenderer 的 IE10 版本中看到的。你试过多台电脑吗？这可能是您的设置特有的吗？

在无法重现问题的情况下很难提出建议，但您可能想尝试的一件事是直接在 SVG 中设置路径属性，而不是通过 CSS。

所以在第一个g元素上你会有这样的东西：

<g fill="none" stroke-width="1.5px" stroke="#666">

这是一个使用静态版本标记的codepen 示例。如果您想自己在 NetRenderer 中进行测试，这里是完整的url 。

即使这不是一个理想的解决方案，至少知道这是否有任何不同是有帮助的。

于 2013-05-04T14:38:22.510 回答