javascript - D3 中的 "Progress dots"，Wolfram 风格

Question

Wolfram(数学相关网站)有以下进度条(或者我应该说进度点):

您可以在实际中看到它 here .

这将如何在 D3 中实现？

这是我写的codepen在 D3 中，有一些不同的想法:

也许它可以作为一个起点。

Answer 1

如果您只想让您生成的圆圈以动画的形式出现和消失，这会起作用。

我喜欢你最好的圆生成器，但如果它生成如下所示的数据数组会更容易:

[
{x: 14, y: 15, r: 5},
{x: 200, y: 100, r:8}
]

对于这样的数组，您可以使用转换链:

svg.selectAll("circle")
    .data(generatedCircleArray)
    .enter()
    .append("circle")
    .attr("r", 0)
    .attr("cx", function(d) {return d.x})
    .attr("cy", function(d) {return d.y})
    .transition()
    .delay(function() {return Math.random() * 500})
    .each(animate)

function animate() {
  var circle = d3.select(this);
  (function repeat() {
    circle = circle.transition()
        .attr("r", function(d) {return r})
      .transition()
        .attr("r", 0)
        .each("end", repeat);
  })();
}

改编自this example.

这应该显示圆圈的动画存在和消失。您可以将其与不透明度动画或改变不透明度相结合以将其混合。