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] 
    }); 
})(); 

見筆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] });