D3JS振動気泡

Question

これは一部の人にとっては些細かもしれませんが、私はD3JSの初心者です。

私は、配列に対して不透明度が変化する2つの静的なバブルをプロットしようとしています。私は気泡をプロットすることができますが、不透明度を連続的に変更することはできません。 transitionとdelayを使用しています。不透明度は1回しか変更できません。ここに私のコードサンプル

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

で継続的にあなたが移行を繰り返すと対照的に、次の1つの不透明状態からすぐに切り替えるのではなく、スムーズに移行を意味し、私はによって仮定ペン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.selectではなくd3.selectAllを使用するか、またはあなたの変数circles

... 

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