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

【问题标题】：Increase and decrease radius of a circle using d3 transition使用 d3 过渡增加和减少圆的半径
【发布时间】：2013-11-22 02:27:41
【问题描述】：

我正在尝试通过增加和减少圆的半径来在圆上创建脉冲效果。我希望圆圈根据给定的数据集扩大和缩小。我只能得到过渡函数来增加或减少半径，但不能同时增加或减少。

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

【问题讨论】：

标签： javascript d3.js geometry transitions

【解决方案1】：

这并不真正适合一般的 D3 数据/进入/更新/退出模式，因为您不是控制多个 DOM 元素，而是更改单个元素的属性。但是，您可以通过添加指定转换的循环轻松完成此操作。代码如下所示。

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

有关完整示例，请参阅here。

【讨论】：

【解决方案2】：

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

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

【讨论】：

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