nvd3.js - 大きな黒い円のオーバーレイ scatterChart

Question

私は非常に奇妙な問題を抱えています - nvd3 Web サイトの散布図サンプルとほぼ同じコードを使用しています (ただし、私の ember.js アプリに接続されています)。約 500 ミリ秒後に、はるかに大きいがプロットの同じ輪郭をたどる一連の黒い円が表示されます。

nv.d3.js で次の行をコメントアウトすると:

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

これは起こらないようで、グラフはアニメーションなしで「動作」します。

誰もそのようなものを見たことがありますか？

score 21 · Accepted Answer

私は自分でこの問題に出くわしたばかりで、それを理解したと思いますが、どこの nvd3 ページでもよく説明されていない理由はわかりません。

ダウンロード/github リポジトリのファイルである html にnvd3 スタイルシートへの参照を含める必要があります。./src/nv.d3.css

私の推測では、黒い円はチャート上の各ポイントのホバー領域であり、SVG のパスのデフォルトスタイルは黒く塗りつぶされています。

nvd3 のインストール手順を改善できるかどうかを確認するために、github で問題を提起しました: 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 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