使用 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 数据/进入/更新/退出模式，因为您没有控制多个 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屋！