我使用Ember 1.11(使用ember-cli构建)和D3 Pie chart有一个奇怪的问题。 该图表在ember路线上无法正确显示,仅在索引路线(index.hbs)上显示。
生成的HTML代码在路径模板和index.hbs上是相同的。我在index.hbs上使用了与路径相同的视图/组件。
奇怪的是,如果转到Inspect Element并删除整个<head></head>
标记,我可以解决此问题。 (逐行删除内容不能解决问题!)
我已经安装了一个示例Ember应用程序here.在索引上,您将看到图表。在菜单路线上,有相同的图表(使用与在index.hbs上呈现的相同的视图呈现),但没有正确显示(当您将鼠标悬停在该区域上时,它会有效。)
图表视图生成的HTML代码在所有页面上都是相同的。如果您从<div id="pieChart">..</div>
复制代码并将其粘贴到空的静态html页面中,则图表将正确呈现。
可以使用以下方法重现此问题:Firefox / Chrome。在野生动物园里它似乎有用。
Here是一个用于呈现图表的paste2。
可以找到构建之前的整个应用程序代码here。
编辑:我也在github上报告了这个问题,here。
答案 0 :(得分:4)
将ENV.locationType
设置为&#34;哈希&#34;而不是默认值(&#34; auto&#34;)。由于您正在使用ember-cli应用程序,因此它位于config/environment.js
。
最终的罪魁祸首可以在这里找到:https://github.com/benkeen/d3pie/blob/master/d3pie-source/_segments.js#L44。基本上,d3pie使用圆弧的图案填充,它作为URL公开。当您进入路径时,最终必须通过Ember,默认情况下配置为忽略散列路由。通过切换它,您可以有效地将该呼叫从Ember的路由命名空间中取出,并且它能够正确解析。
请参阅此处查看工作示例:https://github.com/Little-Jon/so-29780096