Har*_*ari 4 html javascript css svg d3.js
我是SVG和D3的新手,在我实施的过程中学习.面对我目前正在处理的其中一个网站的问题.
要求:
我们想要创建一个自定义图形(类似于条形图),它具有一组代表我的数据点的条形图,并且某些图标根据条形图数据的类型嵌入到这些条形图中.该图表代表了一个人在整个职业生涯中取得的成就.在栏上悬停时,我们会显示一个自定义弹出窗口,其中包含该栏的简要说明(请参阅下面的示例).一些条形图有一个额外的箭头,表示条形图是否代表用户当前正在追求的体验.
到目前为止的进展:
您可以在TIMELINE部分看到我的个人资料.
那么,什么错了？
Chrome上的一切正常(如截图所示).所有其他浏览器在没有图标的情况下渲染图形 您可以在Chrome和Firefox上查看我的个人资料.
我复制了d3生成的SVG HTML代码并将其粘贴在jsfiddle中以在所有浏览器上测试它并发现所有浏览器都在渲染它:(忽略颜色,我没有应用CSS,但图标显示)http:/ /jsfiddle.net/EbpPG/1/
See JS fiddle link
检查我的个人资料以查看图表.生成图形的逻辑可以在chart.js文件createTimelineChart()函数中找到.
有人可以看看它,让我知道我犯的是什么错误？
问题显然是如何动态生成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')