Question

D3JS 振荡气泡

2016-12-14

335

javascript html css d3.js bubble-chart

对于某些人来说，这可能微不足道，但我是 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]
    });
})();

查看 Pen 使用实时数据的 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] });