D3JS振盪氣泡

這對某些人來說可能是微不足道的，但我是D3JS的新手。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

來源

2016-12-14 kthouz

如果「連續」您的意思是您要無限運行轉換，請使用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>

來源

2016-12-14 02:57:46

這工作正常。謝謝@Gerardo Furtado。兩個氣泡應該能夠以不同的不透明度擺動。所以一對分別包含每個泡泡的不透明度 – kthouz

現在它更有意義！請記住，在我的代碼中，數據數組中的兩個值是不透明度的兩個振盪值。 –

是的，明白了。但是，由於未來的某些應用，我選擇使用'setInterval'如下所示： 'tic = new Date（）; setInterval（function（）{ dt = Math.round（（new Date（） - tic）/ 50）％osc.length; d3.select（「＃c_1」）。transition（）。duration（100）。 style（「opacity」，function（）{return osc [dt] [0]}）; d3.select（「＃c_2」）。transition（）。duration（100）.style（「opacity」 {return osc [dt] [1]}）; }） – kthouz

我想通過不斷地你的意思是平穩過渡，而不是從一種不透明狀態立即切換到下一個，而不是重複的過渡。

您首先需要在創建他們設置圓的初始不透明度：

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

來源

2016-12-14 02:44:47

的主要問題是它們沒有不透明度爲選自過渡。所以你需要給他們初始值 –

看看我的例子：它不具有透明度的初始值，但它的工作原理。除此之外，'selectAll'和'select'之間沒有區別，特別是因爲OP是通過ID選擇的（所以'selectAll'沒有任何意義）。 –

@GerardoFurtado我在他的CodePen中運行了OP代碼，直到我添加了初始不透明爲止，它不起作用。我沒有看過你的代碼，但是你可能會發現，如果沒有初始值，你的瀏覽器是特定的。另外，我對OP所尋找的東西的看法與你的不同，在我的閱讀中，「selectAll」非常有意義 –

D3JS振盪氣泡

回答

相關問題