大黑色圆圈覆盖散点图

Question

我遇到了一个非常奇怪的问题 - 我使用的代码或多或少与 nvd3 网站上的散点图示例相同（但挂接到我的 ember.js 应用程序中），我看到一个美丽的情节出来，只是在大约 500 毫秒后被一组黑色圆圈破坏，这些黑色圆圈要大得多，但遵循相同的图轮廓。

如果我在 nv.d3 中注释掉这一行.js：

gEnter.append('g').attr('class', 'nv-point-paths');

这似乎没有发生，图形在没有动画的情况下"工作"ala。

以前有人见过这样的东西吗？

Answer 1

我自己刚刚遇到过这个问题，我想我已经想通了，尽管我不确定为什么在任何地方的 nvd3 页面上都没有更好地解释它。

您需要在 html 中包含对 nvd3 样式表的引用，这是下载/github 存储库中的./src/nv.d3.css文件。

我的猜测是，黑色圆圈是图表上每个点的悬停区域，SVG 中路径的默认样式是黑色填充。

我在 github 上提出了一个问题，看看我们是否可以改进 nvd3 的安装说明：https://github.com/novus/nvd3/issues/19。

Answer 2

事实证明，即使您包含 css 文件，点仍然会显示：

https://dl.dropboxusercontent.com/u/318531/so/black-dots.png

这似乎只是面积图和折线图的问题，更具体地说是工具提示：

https://dl.dropboxusercontent.com/u/318531/so/selector.png

我所做的是隐藏工具提示，如下所示：

<style media="print">    
  .nv-point-paths {
    display: none !important;
  }
</style>

我不确定上面的 css 选择器是否在所有情况下都有效，请检查工具提示元素以确保您隐藏了正确的元素。

PS：我

试图附加屏幕截图，但显然我没有足够的声誉：-（

Answer 3

如果你是Angular2的新手，你可能忘了添加：

encapsulation: ViewEncapsulation.None

这将允许加载外部样式表。

Answer 4

我在尝试将nvd3 scatterPlusLineChart导入jsFiddle时遇到了这个问题。虽然我添加了 css 外部引用，但它不是"采取";我的解决方法是将来自 nv.d3 的源代码.css直接放在 CSS 区域的顶部。有什么想法吗？

另外，如果其他人想玩这个例子，它在

http://jsfiddle.net/mr23/JHWNr/1/

强制性的 jsfiddle 代码来满足 SO.com，即使它是关于引用的......

在：CSS 字段中

/********************
 * HTML CSS
 */
.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}