Обновление сложенной гистограммы с переходом в D3

Question

Используя приведенный здесь пример: http://bl.ocks.org/anotherjavadude/2940908 Я уже некоторое время ощущал свой путь вокруг D3 с помощью основ.

Я построил сложный граф (Fiddle) и сумел заставить мои начальные переходы работать, проблема возникает при добавлении новых данных.

Ошибки я получаю это «Uncaught TypeError: Не удается прочитать свойство„длину“неопределенные»

Вот .data(), где он падает вниз:

d3.select('rect.stacks') 
    .data(function(d){return d;}) // error occurs here 
    .attr("x", function(d) { return x(d.x); }) 
    .attr("width", x.rangeBand()-50) 
    .transition() 
    .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
    .attr("height", function(d) { return y(d.y); })  
    .duration(1000); 

По какой-то причине при попытке обновить пройденный массив 3D не был отформатирован правильно, и я не уверен, почему.

Я попытался извлечь куски в функции и исчерпал свои знания о том, что нужно попробовать (что объяснит любые странности/спагетти).

Спасибо!

Answer 1

При обновлении вы теряете родительское отношение между g.valgroup и rect.stacks, потому что вы выполняете различные функции выбора.

Вы можете попробовать с этим, чтобы сохранить Subselection и сохранить данные:

d3.selectAll("g.valgroup") 
    .data(stacked) 
.selectAll('rect.stacks') 
    .data(function(d){return d;}) 
    .attr("x", function(d) { return x(d.x); }) 
    .attr("width", x.rangeBand()-50) 
    .transition() 
    .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 
    .attr("height", function(d) { return y(d.y); })  
    .duration(1000); 

->https://jsfiddle.net/y8ezx2fh/