Question

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

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

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

这似乎没有发生，图表在没有动画的情况下“工作”。

有没有人见过这样的东西？

Answer 1

我自己刚刚遇到过这个问题，我想我已经弄明白了，虽然我不确定为什么在nvd3页面上没有更好的解释。

您需要在html中包含对nvd3 stylesheet的引用，这是download / github repo中的./src/nv.d3.css文件。

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

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

Answer 2

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

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

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

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

我不确定上面的css选择器是否适用于所有情况，检查工具提示元素以确保隐藏正确的元素。

PS：我试图附上截图，但显然我没有足够的声誉： - （

Answer 3

我试图将nvd3 scatterPlusLineChart导入jsFiddle时出现此问题。虽然我添加了css外部引用，但它不是“正在”; 我的解决方法是将来自nv.d3.css的源直接放在CSS区域的顶部。有什么想法吗？

另外，如果有其他人想玩这个例子，那就是

满足SO.com的强制性jsfiddle代码，即使它是关于参考...

在：CSS字段

/********************
 * HTML CSS
 */

.chartWrap {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

Answer 4

如果您不熟悉Angular2，可能忘记添加：

encapsulation: ViewEncapsulation.None

允许加载外部样式表。