我是SVG和D3世界的新手，在我实施的过程中学习。面对我目前正在处理的其中一个网站的问题。
要求：
我们想要创建一个自定义图形（类似于条形图），它具有一组代表我的数据点的条形图，并且某些图标根据条形图数据的类型嵌入到这些条形图中。该图表代表了一个人在整个职业生涯中取得的成就。在栏上悬停时，我们会显示一个自定义弹出窗口，其中包含该栏的简要说明（请参阅下面的示例）。有些条形图有一个额外的箭头，表示条形图是否代表用户当前正在追求的体验。
到目前为止的进展：
正如您在TIMELINE部分中看到my profile。
那么，有什么不对？
Chrome上的一切正常（如截图所示）。所有其他浏览器在没有图标的情况下渲染图形您可以在Chrome和Firefox上查看我的个人资料。
我复制了d3生成的SVG HTML代码并将其粘贴到jsfiddle中以在所有浏览器上测试它并发现所有浏览器都在渲染它:(忽略颜色，我没有应用CSS，但图标显示） http://jsfiddle.net/EbpPG/1/
See JS fiddle link
检查我的个人资料以查看图表。生成图形的逻辑可以在chart.js文件中找到，createTimelineChart（）函数。
有人可以看一下，让我知道我犯的是什么错误吗？
答案 0 :(得分：6)
问题显然是如何动态生成SVG。 path元素是在错误的命名空间中生成的。这通常发生在你使用jQuery附加字符串：
之类的东西时$('svg').append('<path d="m0,0 h100"/>')
这将生成一个HTML命名空间的路径元素，该元素不存在。 （有趣的是，Chromium甚至没有在开发人员工具中显示它。）
Firebug善于向您展示此类问题。在HTML面板中，错误的命名空间元素以浅色显示。在HTML面板中右键单击它们，您可以选择在DOM面板中进行检查，在那里可以看到namespaceURI属性是什么。
所以，使用普通的DOM操作方法，或者，如果你已经在使用d3，
d3.select('svg').append('svg:path').attr('d','m0,0 h100')
答案 1 :(得分：1)
使用Firefox DOM Inspector查看，您将看到构成图标的路径元素位于HTML命名空间中，而不是显示它所需的SVG命名空间。
您是否通过decodeHTMLEntities传递此数据，这可能是在错误的命名空间中重新创建元素，您需要使用调试器来查看它何时出错。
如果您保存d3生成的页面，那么当它被任何UA重读时，它将选择正确的命名空间，这就是jsfiddle工作的原因。