D3JS колебательные пузыри

Question

Это может быть тривиально для некоторых людей, но я новичок в D3JS.

Я пытаюсь построить два статических пузырька с изменением непрозрачности относительно массива. Я могу построить пузырьки, но я не могу постоянно менять их прозрачность. Я использую transition и delay, а непрозрачность может меняться только один раз. Вот мой пример кода

(function() { 

    var dropsize = 100; 
    var gapsize = 20; 
    var osc = [[1, 1],[0.5, 0.5],[0, 0],[0.5, 0.5],[1, 1],[0.5, 0.5],[0, 0],[0.5, 0.5]]; 
    var radius = dropsize/2; 
    var h = 100; 
    var w = (4 * radius + 3 * gapsize); 
    var svg = d3.select("#chart").append("svg"); 
    var svg = d3.select("body") 
    .append("svg") 
    .attr("width", w) 
    .attr("height", h) 
    .style("background-color", "teal"); 
    var circles = svg.selectAll("circle") 
    .data([radius, 3 * radius]) 
    .enter() 
    .append("circle"); 
    circles.attr("cx", function(d, i) { 
     return d + (i + 1) * gapsize; 
    }) 
    .attr("cy", h/2) 
    .attr("r", function(d, i) { 
     return radius; 
    }) 
    .attr("fill", "orange") 
    .attr("class", "droplet") 
    .attr("id", function(d, i) { 
     return "c_" + (i + 1); 
    }); 
    d3.select("#c_1") 
    .data(osc) 
    .transition().delay(function(d, i) { 
     return i * 1000; 
    }) 
    .duration(1000) 
    .attr("opacity", function(d) { 
     return d[0] 
    }); 
})(); 

Смотрите Pen Bubble Chart with D3.js using Realtime Data

Answer 1

Если по «непрерывно» означает, что вы хотите бесконечно запускать переход, используйте on("end"), чтобы снова вызвать функцию перехода.

Вот пример:

var toggle; 
 

 
var data = [0, 1]; 
 

 
transition(); 
 

 
function transition() { 
 
    toggle ^= 1; 
 
    d3.select("circle") 
 
     .transition() 
 
     .duration(1000) 
 
     .style("opacity", data[toggle]) 
 
     .on("end", transition); 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg> 
 
\t <circle cx="100" cy="100" r="50"></circle> 
 
</svg>

Answer 2

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

Сначала необходимо установить начальную непрозрачность на кружках при их создании:

.attr("opacity", 0) 

И затем использовать d3.selectAll вместо d3.select, или лучше ваша переменная circles

... 

circles 
    .data(osc) 
    .transition()       
    .delay(function(d,i){ return i*1000; }) 
    .duration(1000) 
    .attr("opacity",function(d){ return d[0] });