渲染 D3 饼图时出错(显示不正确)

Error while rendering D3 pie chart (not displaying properly)

我在使用 Ember 1.11(使用 ember-cli 构建)和 D3 Pie chart 时遇到了一个奇怪的问题。 海图在 ember 航线上显示不正确,仅在索引航线 (index.hbs) 上显示。

生成的 HTML 代码在路由模板和 index.hbs 上是相同的。我在 index.hbs 上使用了与在路线上相同的 view/component。

奇怪的是,我可以通过检查元素并删除整个 <head></head> 标签来解决这个问题。 (逐行删除内容并不能解决问题!)

我已经安装了示例 Ember 应用程序 here. 您将在索引中看到图表。在菜单路线上,有相同的图表(呈现的视图与在 index.hbs 上呈现的视图相同),但显示不正确(当您将鼠标悬停在该区域上时它会起作用)。

图表视图生成的HTML代码在所有页面上都是相同的。如果您从 <div id="pieChart">..</div> 复制代码并将其粘贴到空的静态 html 页面,图表将正确呈现。

可以使用以下方法重现此问题:Firefox/Chrome。在 safari 中它似乎有效。

Here 是呈现图表的 paste2。

可以找到构建前的整个应用程序代码here

编辑:我也在 github、here 上报告了这个问题。

ENV.locationType 设置为 "hash" 而不是默认值 ("auto")。由于您正在使用 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