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

- adammcc

Answer 1

这与一般的D3数据/输入/更新/退出模式不太匹配，因为您没有控制多个DOM元素，而是更改单个元素的属性。但是，您可以使用循环轻松地按照指定添加过渡效果。 代码看起来像这样。

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

完整示例请参见此处。

- Lars Kotthoff

Answer 2

另一种选项可以创建连续脉冲的圆形： http://bl.ocks.org/chiester/11267307

- hiester

---

虽然这个链接可能回答了问题，但最好在这里包含答案的重要部分，并提供该链接作为参考。仅包含链接的答案如果链接页面发生更改就会变得无效。 - bummi