nvd3.js - 大黑圈叠加散点图

Question

我遇到了一个非常奇怪的问题 - 我使用的代码与 nvd3 网站上的散点图示例大致相同（但已连接到我的 ember.js 应用程序），我看到一个美丽的情节只是被破坏了大约 500 毫秒后，一组黑色圆圈更大，但遵循绘图的相同轮廓。

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

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

这似乎没有发生，并且没有动画的图形“工作”ala。

有没有人见过类似的东西？

score 21 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

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

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

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

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

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

score 2 · Accepted Answer

如果您是 Angular2 的新手，您可能忘记添加：

encapsulation: ViewEncapsulation.None

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

score 1 · Accepted Answer

我在尝试将 nvd3 scatterPlusLineChart 导入 jsFiddle 时遇到了这个问题。虽然我添加了 css 外部引用，但它不是“接受”；我的解决方法是将 nv.d3.css 的源代码直接放在 CSS 区域的顶部。有任何想法吗？

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

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

在：CSS 字段

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

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

4 回答 4