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

我假设连续是指平滑过渡，而不是立即从一种不透明度状态切换到下一种，而不是重复过渡。

创建圆圈时首先需要设置初始不透明度：

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

Answer 2

如果"continuously"表示要运行无限过渡，请使用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>
 <circle cx="100" cy="100" r="50"></circle>
</svg>

D3JS 振荡气泡

D3JS oscillating bubbles

html

javascript

css

bubble-chart

d3.js