javascript 使用 d3 过渡增加和减少圆的半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19886834/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Increase and decrease radius of a circle using d3 transition
提问by adammcc
I am trying to create a pulse effect on a circle by increasing and decreasing its radius. I would like the circle to grow and shrink based on a given data set. I can only get the transition function to ether increase or decrease the radius but not both.
我试图通过增加和减少其半径来在圆上创建脉冲效果。我希望圆圈根据给定的数据集增长和缩小。我只能让过渡函数增加或减少半径，但不能两者兼而有之。
d3 automatically creates a different circle for each value in the array. How can I make it so that one circle's radius grows and shrinks as it iterates through the array? a simple version of what I have so far is below. Thanks for any help you can offer.
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");
回答by Lars Kotthoff
This doesn't really fit with the general D3 data/enter/update/exit pattern because you're not controlling multiple DOM elements, but changing attributes of a single one. You can however do this quite easily with a loop that adds the transitions as specified. The code would look like this.
这并不适合一般的 D3 数据/输入/更新/退出模式，因为您不是在控制多个 DOM 元素，而是在更改单个元素的属性。但是，您可以使用按指定添加过渡的循环轻松完成此操作。代码看起来像这样。
dataset.forEach(function(d, i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r", d);
});
For a complete example, see here.
有关完整示例，请参见此处。
回答by hiester
Another option that creates a continuously pulsing circle:
另一个创建连续脉冲圆的选项：
