Связанные анимации/переходы по каждому узлу графа - D3.js

Question

Я хочу, чтобы иметь возможность изменять радиус каждого узла в моем графике, который я создаю, используя d3.js. Тем не менее, я хочу изменить радиус каждого узла, по одному за раз, и я хочу иметь возможность контролировать задержку между каждым изменением вместе с последовательностью узлов.

Пока это то, что я имею в терминах кода:

var nodes = svg.selectAll(".node"); 
nodes.each(function() { 
    d3.select(this). 
    transition(). 
    delay(100). 
    attr("r", "5") 
}); 

Вы можете повторить это просто используя код по этой ссылке: http://bl.ocks.org/mbostock/4062045. Код, который я вставил выше, является просто дополнением к коду на вышеупомянутой ссылке.

Когда я запускаю это, все nodes в моем графическом переходе одновременно, т. Е. Растут в размере (радиусе) одновременно. Тем не менее, я хочу, чтобы они переходили, т. Е. Растут по размеру (радиус) по одному за раз. Я повторяю, что я хочу, чтобы иметь возможность контролировать:

1. delay между переходом каждого node и
2. порядок nodes, которые проходят переходы.

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

Ближайший я пришел к онлайн-ссылкам в этом подразделе учебника по переходам d3.js: http://bost.ocks.org/mike/transition/#per-element. Однако в нем отсутствует конкретный пример кода. Я, будучи новичком в d3.js и javascript в целом, не могу забрать его без конкретных примеров кода.

Answer 1

Вы можете сделать это довольно легко, вычислив задержку на основе индекса каждого узла. Майк Босток имеет пример такой реализации here. Это соответствующий код:

var transition = svg.transition().duration(750), 
    delay = function(d, i) { return i * 50; }; 

transition.selectAll(".bar") 
    .delay(delay) 
    .attr("x", function(d) { return x0(d.letter); }); // this would be .attr('r', ...) in your case 

Чтобы контролировать порядок перехода, все, что вы бы тогда сделать это своего рода массив так, что индексы элементов отражают анимации потока вы хотите. Чтобы узнать, как отсортировать массив, обратитесь к документации по методу JavaScript array.sort, а также см. Раздел Arrays > Ordering справочника D3 API.