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

我试图通过增加和减少圆的半径，在圆上创建一个脉冲效果。我希望圆根据给定的数据集增长和收缩。我只能得到增加或减少半径的过渡函数，但不能同时得到这两个函数

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");

---

这实际上不适合一般的D3数据/enter/update/exit模式，因为您不是在控制多个DOM元素，而是在更改单个DOM元素的属性。但是，通过按指定添加转换的循环，您可以很容易地做到这一点。代码如下所示

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

---

有关完整示例，请参见。

另一个创建连续脉冲圆的选项：

---

虽然此链接可以回答问题，但最好包含答案的基本部分并提供链接供参考。如果链接页面发生更改，则仅链接的答案可能无效。