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

前端之家收集整理的这篇文章主要介绍了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.f2er.com/js/152724.html

猜你在找的JavaScript相关文章