Перезагрузить вложенные данные в D3.js

Мне не удается обновить гистограмму с вложенными данными в D3.js новыми данными.

У меня есть вложенные данные формы:

data = [[1,2,3,4,5,6],[6,5,4,3,2,1]];

Мне удалось визуализировать данные, сначала добавив группу для каждого подмассива. Затем в группы я добавляю массивы как данные (упрощенно):

function createGraph(l, svg){
  var g = svg.selectAll("g")  
    .data(l)
    .enter().append("g");  

  var rect = g.selectAll("rect)  
    .data(function(d){return d;})  
    .enter().append("rect")
    . ...
}

Однако при повторном вызове функции с другими данными ничего не происходит.

Вроде как во второй строке прямоугольники не обновляются.

Я создал полный пример в jsBin: http://jsbin.com/UfeCaGe/1/edit?js,output


d3.js bar-chart animated
person pat    schedule 31.01.2014    source источник
comment
Вы не обрабатываете выбор обновления и выхода для элементов g. Вы ищете что-то вроде этого?   -  person Lars Kotthoff    schedule 01.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

Еще немного пояснений по ловушке Ларса, так как я уже начал играться...

Ключ был в этом разделе кода:

  var group = svg.selectAll("g")  
    .data(l)
    .enter().append("g");

Переменной group назначается выбор ввода, а не необработанный выбор. Затем в следующей строке:

var bar = group.selectAll("rect")
        .data(function(d){
            return d;
        });

В конечном итоге вы определяете bar только как прямоугольники, которые являются дочерними элементами только что введенных групп. Таким образом, несмотря на то, что вы правильно обрабатывали обновление для прямоугольников, весь этот раздел кода даже не выполнялся. Вам нужно сохранить выбор группы, прежде чем разветвлять цепочку, чтобы иметь дело с вводом групп:

var group = chart.selectAll("g")
        .data(dt);

group.enter().append("g");

var bar = group.selectAll("rect")
        .data(function(d){
            return d;
        });

Кроме того, вам не хватает j в объявлении функции в вашем обновлении. И вы можете уменьшить дублирование кода, поместив свой код обновления прямоугольника после вашего кода ввода прямоугольника, и тогда любые атрибуты, которые устанавливаются в обновлении, не должны указываться для ввода. (В некоторых старых примерах этот шаблон не используется, потому что исходные версии d3 не передавали автоматически вновь введенные элементы в основной выбор.)

// enter
bar.enter().append("rect")
    .attr("fill", function(d,i,j){
        return colors(j);})
    .attr("height", 0);

// update
bar.attr("transform", function(d, i, j) {
        x = "translate("+(i*2.2*w+j*w)+",0)";
        return x; })
    .transition()
    .duration(750)
    .attr("width", w)
    .attr("height", function(d){return d*10;});
person AmeliaBR    schedule 31.01.2014
comment
большое спасибо за ваш развернутый ответ. И снова я оставляю переполнение стека с новыми концептуальными идеями! :) - person pat; 01.02.2014
comment
Вы говорили об отсутствующем ‹code›j‹/code›, где я могу найти документацию о полном наборе параметров, которые могут принимать эти функции доступа? - person pat; 01.02.2014
comment
Это хороший вопрос: возможность использовать вложенный индекс является скрытой функцией, которая в настоящее время не упоминается в документация; Я не уверен, когда он был добавлен, но есть некоторые недавняя проблема исправления для определенных функций, где они не передавались должным образом. В любом случае: Параметры, доступные для большинства функций обратного вызова, это (по порядку) объект данных, индекс внутри группы и индекс группы (обычно d,i,j). Узел также доступен как this. - person AmeliaBR; 01.02.2014