D3.js堆疊條形圖選擇

我試圖去掌握一些D3的概念，但感覺好像我的知識存在一些基礎空白。它似乎與D3 stack（）函數的工作方式。D3.js堆疊條形圖選擇

我想了解爲什麼以下兩個代碼片段是而不是等效。第一個工作和填充數據，第二個沒有。

優先（工作守則，簡體）：

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

gBars = g.selectAll("g") 
     .data(seriesData, function (d, i) { return (i); }) 
     .enter().append("g").. more work here

二（不工作，Simplifed）：

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

gBars = g.selectAll("g") 
     .data(seriesData, function (d, i) { return (i); }); 

gBars.enter().append("g").. more work here

基本上，我剛纔想分手的代碼，使其更簡單（對我來說）閱讀，也允許我實現一個exit（）函數。但是，當我這樣做，圖表無法顯示。

我認爲gBar變量應該保持以前的選擇？

任何援助將不勝感激，我已經成功地使用這種模式的簡單圖表，因此我懷疑這與我所缺少的d3.stacked（）函數涉及嵌套數據時丟失的東西？

來源

2017-01-20 Sabur Aziz

你在你的問題中遺漏了一些關鍵代碼：在你的'...'之後如何使用'gBars'？這裏有更多的工作是什麼？這是重要的部分！ – Mark

嗨，它只是添加一些屬性到選擇的項目。例如：.apprend（「g」）。attr（「fill」，「＃ff0000」）< - 由於我沒有做任何特殊的事情，在此之後，gBars並沒有被使用，我只是用這種方式「學習」並且玩弄幾件事情。 –

隨着一些友好的幫助，我發現區別在於v4處理選擇的方式。答案是利用合併來組合各種選擇，然後在合併的節點上執行任何組合更新。

如：

var mainStack = d3.stack().keys(keys); 
var seriesData = mainStack(dataset[0]); 

var gBarsUpdate = g.selectAll("g") 
    .data(seriesData, function (d, i) { return (i); }); 

var gBarsEnter = gBarsUpdate.enter().append("g") 

var gBars = gBarsEnter.merge(gBarsUpdate) 

//now update combined with common attributes as required 
gBars.attr("fill", "#ff0000"); //etc

希望這有助於其他人有點被這個困惑。花了我一些時間瞭解發生了什麼，但是由於一些聰明的人，他們把我放在正確的軌道上:-)

ps。我的問題最終與stack（）函數無關。

來源

2017-01-27 10:29:43

D3.js堆疊條形圖選擇

回答

相關問題