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

见钢笔使用实时数据的D3.js气泡图

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