d3在更新時調整路徑（獲得10 px寬度） - 爲什麼？

Question

TL; DR：更新時爲什麼fiddle example中的折線圖路徑增長了10 px寬度？

長篇版本：我正在d3中構建一些微觀經濟模擬，試圖說明價格彈性。 Here's a fiddle（它實際上沒有說明彈性，它只是一個試圖讓圖形工作的虛擬）。這個想法是你調整價格（通過用鼠標拉動價格欄的高度），並更新需求線圖。

唯一的問題是，當它更新時，折線圖<path>似乎增長10px。 （你可以在你的瀏覽器檢查器中驗證它 - 它應該從408px到418px）。我不知道爲什麼會發生這種情況。

我不相信有額外的點被添加，只是路徑被水平拉伸。相關的更新函數使用原始數據作爲x.axis域的輸入 - 所以我不明白爲什麼數據點應該以不同的方式映射到x範圍。

//...extract of the update function 
var demandData = demandForecastData.map(function(d, i){ 
    return [ d[0], d[1] + somestuff ]; 
}); 
updateDemand(demandData); 

有人可以聰明地告訴我發生了什麼事嗎？

Answer 1

您設置頁邊距爲這樣： //svg margins for axis labelling, etc var margin = {top: 20, right: 40, bottom: 30, left: 40}

但在繪製它，你將減少10右頁邊距： //graph the bar chart var margin = {top: 20, right: 30, bottom: 30, left: 40}

只是將其更新到right: 40和它的固定。