Выбор гистограммы с накоплением D3.js

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

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

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

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


d3.js stackedbarseries
person Sabur Aziz    schedule 20.01.2017    source источник
comment
Вы упустили важный код в своем вопросе: как gBars используется после вашего ...? Что за more work here? Это важная часть!   -  person Mark    schedule 21.01.2017
comment
Привет, это просто добавление нескольких атрибутов к выбранным элементам. например: .apprend(g).attr(fill,#ff0000) ‹ -- Я пропустил это, так как не делал ничего особенного. После этого gBars не используется, я просто использую его таким образом, чтобы учиться и играть с несколькими вещами.   -  person Sabur Aziz    schedule 22.01.2017

Ответы (1)


arrow_upward
0
arrow_downward

С некоторой дружеской помощью я обнаружил, что разница заключается в том, как v4 обрабатывает выбор. Ответ состоял в том, чтобы использовать слияния для объединения различных выборок, а затем выполнять любые комбинированные обновления на объединенных узлах.

Eg:

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

Надеюсь, это поможет кому-то еще немного смущенным этим. Мне потребовалось немного времени, чтобы понять, что происходит, но благодаря некоторым умным людям они направили меня на правильный путь :-)

пс. Моя проблема оказалась не связанной с функцией stack().

person Sabur Aziz    schedule 27.01.2017