javascript – 使用d3转换增加和减少圆的半径

我试图通过增加和减少其半径来创建一个圆圈的脉冲效应.我希望圈子根据给定的数据集增长和收缩.我只能获得过渡功能,以增加或减少半径,但不能同时增加.

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.

原文地址：https://www.jb51.cc/js/152724.html