D3.js Stacked Bar Chart Выбирает

Question

Я пытаюсь понять некоторые концепции D3, но чувствую, что в моих знаниях есть некоторые основные недостатки. Это кажется, как работает функция D3 stack().

Я пытаюсь понять, почему следующие два фрагмента кода: не эквивалент. Первый работает и заполняет данные, второй - нет.

Первый (рабочий код, упрощенный):

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 

Второй (не работает, упрощенный):

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(), которая влагает данные?

Answer 1

С некоторой дружеской помощью я обнаружил, что разница в способе выбора 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().