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