2013-01-15 86 views
0

我在關注this example of a difference chart。我在頁面上添加了按鈕,用於調用Ajax調用來獲取新數據集,然後重繪差異圖表。我的網頁上有幾個不同的圖表。trouble with selection.datum()

重新繪製時,上面/下面區域的渲染會被破壞:x值具有渲染區域的上方和下方。我很確定這不是後端問題,因爲初始加載產生了正確的圖表;改變一個參數會弄亂重繪的圖表;並返回到默認參數並重繪原始圖表也會生成損壞的圖表。事實上,我可以部分地瞭解發生了什麼:原始時間序列出現在新圖上。就好像有三個系列正在繪製。

我認爲它與.datum有關。我不完全理解它是如何工作的,因爲它不同於與.data相關的標準輸入/更新/退出方法。我讀過the documentation,但我仍然感到困惑。一些可能性:

  1. 的原始數據被掛在(即使我清理掉容器$('#chart').html('')
  2. .append(g)被添加組不去除早期的。
  3. svg.append("clipPath").attr("id", "clip-below")是造成問題,因爲多個節點具有相同的ID(即使再次,我不知道這是如何發生的,因爲我在重繪前刪除節點)。

我覺得我在這裏錯過了很多基礎知識,儘管我花了相當多的時間去了解圖書館。任何人都可以看到任何明顯的東西,或者指出一些好的資源讓我看看?

更新:這與頁面上有兩個圖表有關。當我打開檢查員並關閉它時,我注意到了這一點。底部圖表(差異圖表)的區域已經搞砸了,我注意到它用來將上面區域與下面區域分開的新線看起來很像上圖中的一條線。

當在同一頁上繪製兩個圖表時,是否有人有依賴性問題/名稱空間衝突的經驗?

回答

0

問題是,裁剪路徑的ID是相同的。

我仍然想要更多關於.datum的資源。