例如,如果我在 IE10 中打开此图:http : //bl.ocks.org/mbostock/1153292,我只是看不到节点之间的链接。
我可以在代码中做些什么来让即使使用 Internet Explorer 也能看到?
似乎 IE 只是忽略了 svg 的某些部分......我找不到任何方法让它可见。
例如,如果我在 IE10 中打开此图:http : //bl.ocks.org/mbostock/1153292,我只是看不到节点之间的链接。
我可以在代码中做些什么来让即使使用 Internet Explorer 也能看到?
似乎 IE 只是忽略了 svg 的某些部分......我找不到任何方法让它可见。
概括:
IE中有一个错误会导致带有标记的路径无法正确呈现。删除标记的原始代码呈现没有问题。
有三种解决方案:
选项 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 问题跟踪器网站上的此帖子,然后单击指示您可以重现此错误的链接。也许我们可以引起他们的注意?
另一个标记问题由 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 上添加此补丁
如果这对您有用,请不要忘记转到另一个问题并给克里斯蒂安投赞成票
我不确定这是否已经解决,但在我比较的所有浏览器中,该图看起来几乎与我相同。我没有 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 。
即使这不是一个理想的解决方案,至少知道这是否有任何不同是有帮助的。