使用d3过渡增加和减少圆的半径

Question

我试图通过增加和减小圆的半径来在圆上创建脉冲效果。 我希望圈子根据给定的数据集而扩大和缩小。 我只能获得以太增加或减小半径的过渡函数，而不能同时获得两者。

d3会自动为数组中的每个值创建一个不同的圆。 我怎样才能使一个圆的半径随着遍历数组而增大和缩小？ 下面是我到目前为止的简单版本。 谢谢你的尽心帮助。

dataset = [30, 80, 150, 90, 20, 200, 180]

var svg = d3.select("body")
  .append("svg")
  .attr("width", w)
  .attr("height", h);

var circle = svg.selectAll("circle")
  .data(dataset)
  .enter()
  .append("circle");

circle
  .attr("cx", 500)
  .attr("cy", h/2)
  .attr("r", dataset[0])
  .attr("fill", "orange");

Answer 1

这实际上不适合一般的D3数据/输入/更新/退出模式，因为您不是控制多个DOM元素，而是更改单个元素的属性。 但是，您可以通过添加指定过渡的循环来轻松实现此目的。 代码看起来像这样。

dataset.forEach(function(d, i) {
    circle.transition().duration(duration).delay(i * duration)
        .attr("r", d);
});

有关完整示例，请参见此处 。

Answer 2

创建连续脉冲圆的另一种选择：

http://bl.ocks.org/chiester/11267307