【发布时间】：2013-08-08 15:29:24
【问题描述】：
我已将 d3 的强制导向图形布局嵌入到 extjs 选项卡中，这样每次添加新选项卡时都会生成一个新的图形 svg。 到目前为止没有问题。
现在我打算将图形变成有向图（通过添加标记并告诉线条使用它）
每个生成的 svg 元素都遵循这个模式：
<svg width="100%" height="100%">
<defs><marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="3" markerHeight="3" orient="auto"><path d="M0,-5L10,0L0,5" fill="#ccc"></path></marker>
</defs>
<g transform="translate(4,0) scale(1)"><line class="link" sig="30.84" style="stroke-width: 3;" x1="538" y1="347" x2="409" y2="467" marker-end="url(#end-arrow)"></line>
...
</g>
</svg>
使用 Crome，一切正常。 所以我得出结论，结构和 我生成 svgs 的方式应该或多或少是正确的。
但是对于 Firefox，标记只会显示第一个 svg。 （第一个标签） 所有其他 svg 都不会显示任何箭头。
“Inspect Elements”告诉我标记在那里并且线条正在引用它们。
这就是我想在哪里或什么地方寻找什么的地方。 :(
【问题讨论】：
-
你能创建一个 jsfiddle 以便我们查看代码吗？另外你确定你没有重复的 id 属性吗？
-
是的，重复的 ids 是我第一次想到的地方。特别是因为所有标记 ID ="end-arrow"。但是由于它们在它们的 svg 中是唯一的，并且因为另一个浏览器可以正确显示它们而没有问题，所以我怀疑它是一个 ID 的东西。但也许我错过了一些明显的东西:)