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

如果通过＆＃34;连续＆＃34; 表示您想要无限制地运行转换，请使用on("end")再次调用转换函数。

以下是一个例子：

＆＃13;

var toggle;

var data = [0, 1];

transition();

function transition() {
    toggle ^= 1;
    d3.select("circle")
        .transition()
        .duration(1000)
        .style("opacity", data[toggle])
        .on("end", transition);
}

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<svg>
	<circle cx="100" cy="100" r="50"></circle>
</svg>

＆＃13;

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

D3JS振荡气泡

2 个答案: