javascript - 使用 nvd3-ng2 丢失网格线

Question

我遇到了一个奇怪的问题，无法解决。我的图表缺少 x 和 y 轴线，并且工具提示框也只显示文本，而不显示框本身。

即使仅使用 ng2-nvd3 的 github 页面自述文件“基本用法”部分中的示例离散条形图，我也对此进行了测试。

有什么想法造成这种情况吗？我设置了一个非常简单的 angular2 网站，除了 bootstrap 之外，还有最少的样式和非常最少的 HTML。即使删除了所有样式，问题仍然存在。

图表的其他所有内容都完美运行。

Screenshot showing problems with sample bar chart from readme

浅棕色条顶部的 D196.5 是工具提示。正如您所看到的，所有网格线和工具提示框都丢失了。

如果有人想自己测试问题，这里有一个示例应用程序:https://github.com/ekuusi/nvd3-ng2-grid-issue

示例应用程序是一个展示该问题的最小 MEAN 项目。运行项目:

• 复制到本地文件夹
• npm 安装
• npm 运行构建
• npm 启动

该应用程序监听 localhost:3000。该应用程序只有一个 View ，其中包含 Hello World 和展示问题的条形图。

编辑:已解决，但如果有人遇到同样的问题，我会将其留在这里。如果您想了解如何让 ng2-nvd3 在带有 Webpack 的 Angular 2 项目中工作，也可以随意使用此处链接的存储库。

Answer 1

好吧，事实证明，由于让 ng2-nvd3 在我实现的最终版本中工作所需的 Webpack 解决方法，我缺少所需的样式。

通过将主样式表 nv.d3.min.css 从 nvd3 节点模块复制到我的项目文件夹中并将其链接到我的索引页中来修复此问题。