私はこの差分チャートの例に従っています。新しいデータセットをフェッチするためにajax呼び出しを行うボタンをページに追加してから、差分チャートを再描画します。私のページにはいくつかの違いのチャートがあります。
再描画すると、上/下の領域のレンダリングが破損します。x値には、上と下の両方の領域がレンダリングされます。初期ロードによって正しいチャートが生成されるため、バックエンドの問題ではないと確信しています。パラメータを変更すると、再描画されたグラフが台無しになります。また、デフォルトのパラメータに戻って元のグラフを再描画すると、破損したグラフも作成されます。実際、何が起こっているのかを部分的に理解することができます。元の時系列が新しいグラフに表示されます。まるで3つのシリーズがグラフ化されているかのようです。
.datumと関係があると思います。.dataに関連付けられている標準のenter/update / exitメソッドとは異なるため、どのように機能するかを完全には理解していません。ドキュメントを読みましたが、まだ混乱しています。いくつかの可能性:
- 元のデータがぶら下がっています(コンテナをでクリーンアップしたにもかかわらず
$('#chart').html('')
) - は
.append(g)
、以前のグループを削除せずにグループを追加しています。 - 複数のノードが同じIDを持っているため、これ
svg.append("clipPath").attr("id", "clip-below")
が問題を引き起こしています(ただし、再描画の前にノードを削除したため、これがどのように発生するかはわかりません)。
図書館を理解しようとかなりの時間を費やしてきましたが、ここでは多くの基礎が欠けているように感じます。誰かが明白な何かを見ることができますか、または私が見るためのいくつかの良いリソースを指摘できますか?
更新:これは、ページに2つのグラフがあることと関係があります。インスペクターを開いて閉じたときに気づきました。下のチャート(差分チャート)の領域がめちゃくちゃになっていて、上の領域と下の領域を分離するために使用している新しい線が、上のチャートの線の1つによく似ていることに気付きました。
同じページに2つのグラフを描画するときに、依存関係の問題や名前空間の衝突の経験がある人はいますか?