使用d3过渡增大和减小圆的半径 [英] Increase and decrease radius of a circle using d3 transition
问题描述
我想通过增加和减少一个圆的半径来创建一个脉冲效果。我希望圈子根据给定的数据集增长和收缩。我只能得到转换函数以增加或减少半径,但不能同时增加或减少。
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会自动为数组中的每个值创建一个不同的圆。我如何使它的一个圆的半径增长和收缩,因为它迭代数组?一个简单的版本,我已经到目前为止下面。感谢您提供任何帮助。
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.
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元素,而是更改单个属性。然而,你可以很容易地用一个循环添加指定的过渡。代码看起来像这样。
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.
dataset.forEach(function(d, i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r", d);
});
有关完整示例,请参阅此处。
For a complete example, see here.
这篇关于使用d3过渡增大和减小圆的半径的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!