我试图通过增加和减少其半径来创建一个圆圈的脉冲效应.我希望圈子根据给定的数据集增长和收缩.我只能获得过渡功能,以增加或减少半径,但不能同时增加.
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数据/输入/更新/退出模式,因为您不是控制多个DOM元素,而是改变单个DOM元素的属性.然而,您可以非常容易地使用循环添加根据指定的转换.代码看起来就像这样.
dataset.forEach(function(d,i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r",d);
});
有关完整的示例,请参阅here.