Увеличение и уменьшение радиуса круга с использованием перехода d3

Question

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

d3 автоматически создает для каждого значения в массиве другой круг. Как я могу сделать это так, чтобы радиус одного круга увеличивался и сжимался, когда он итерации через массив? простая версия того, что у меня до сих пор, ниже. Спасибо за любую помощь, которую вы можете предложить.

dataset = [30, 80, 150, 90, 20, 200, 180] 

var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h); 

var circle = svg.selectAll("circle") 
    .data(dataset) 
    .enter() 
    .append("circle"); 

circle 
    .attr("cx", 500) 
    .attr("cy", h/2) 
    .attr("r", dataset[0]) 
    .attr("fill", "orange"); 

Answer 1

Это на самом деле не согласуется с общими данными D3/вводом/обновить шаблон/выхода, потому что вы не контролируете несколько элементов DOM, но изменить атрибуты одного. Однако вы можете сделать это довольно легко с помощью цикла, который добавляет переходы, как указано. Код будет выглядеть следующим образом.

dataset.forEach(function(d, i) { 
    circle.transition().duration(duration).delay(i * duration) 
     .attr("r", d); 
}); 

Полный пример см. В here.

Answer 2

Другой вариант, который создает постоянно пульсирующий круг:

http://bl.ocks.org/chiester/11267307