將stack（）調用從v3轉換爲v4

我已經有了Mike Bostock的動畫堆棧（seen here）的一個修改版本，現在已經工作了一段時間。在其他人的建議下，我一直在試圖將我所有的D3版本3圖表轉換爲版本4，所以所有內容都是兼容的。將stack（）調用從v3轉換爲v4

不幸的是，我似乎無法弄清楚爲什麼這段代碼不會編譯。它拋出「Uncaught TypeError」。我被告知與新版本需要傳遞給stack（）的數組有關。

var stack = d3.stack() 
    .values(data, function(d) { return d.values; }) 
    .x(function(d) { return d.date; }) 
    .y(function(d) { return d.value; }) 
    .out(function(d, y0) { d.valueOffset = y0; });

在D3版本4下該如何正確完成？

編輯：我也發現this link to a support request on github，但似乎在那裏沒有人可以簡單地解釋如何轉換此圖表。

來源

2017-07-26 Keith

v4堆棧函數需要csv-like數據。你將不得不改變你的數據結構。 –

D3 v4 d3.stack()構造函數沒有values,x,y和out鏈接方法。它是第3版的語法。檢查文檔here。看看堆積的條形圖的this example。注意，如d3.stack用在這個例子：

... 
    g.append("g") 
    .selectAll("g") 
    .data(d3.stack().keys(keys)(data)) 
    .enter().append("g") 
...

更新：在這個問題到D3 V4提到我重寫「bl.ocks」由麥克·博斯托克。看看這個小提琴 - https://jsfiddle.net/levvsha/vrbq7ebz/

來源

2017-07-26 09:53:12

所以你說我在新版本中不能用堆棧方法做那種事情？我喜歡D3，但它令人非常沮喪，新版本在邏輯上與版本3不兼容。 – Keith

@Keith不幸的是，這是真的。 D3的一些部分在第四版中被重寫。我有一些將組件從第三版升級到第四版的經驗。我重寫了你提到的第四版「bl.ocks」和更新的答案，看看這個 - https://jsfiddle.net/levvsha/vrbq7ebz/。我希望這可以幫助你重寫你的組件。 –

它的工作原理！這對你做米哈伊爾太棒了，非常感謝現場的例子。 – Keith

將stack（）調用從v3轉換爲v4

回答

相關問題