使用 d3 过渡增加和减少圆的半径
Increase and decrease radius of a circle using d3 transition
我试图通过增加和减少圆的半径来对圆产生脉冲效果。我希望圆圈根据给定的数据集增长和缩小。我只能获得以太增加或减少半径的过渡函数,但不能同时获得两者。
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 data/enter/update/exit 模式,因为您不是在控制多个 DOM 元素,而是在更改单个元素的属性。但是,您可以使用按指定添加过渡的循环轻松完成此操作。代码如下所示。
dataset.forEach(function(d, i) {
circle.transition().duration(duration).delay(i * duration)
.attr("r", d);
});
有关完整示例,请参阅此处。
另一个创建连续脉冲圆的选项:
http://bl.ocks.org/chiester/11267307
相关文章:
- JQuery使计数器每次更改时都会增加
- D3在一个调用中绘制不同的SVG形状,没有可见性
- 为什么在单独的函数中应用时转换会闪烁/断断续续(D3)
- 如何在d3.js中返回路径的y坐标
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- 为什么我的d3.jsselectAll+过滤器没有过滤
- 使用D3.js计算带有字母间距的文本长度
- 如何增加同时按键总数
- d3中堆栈函数和嵌套函数之间的差异
- 如何使用css动画从中心增加边界线
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 使用d3进行实时图表时,内存逐渐增加
- 使用 d3 过渡增加和减少圆的半径
- 居中 D3 图表 + 增加响应能力
- 增加d3属性的最好方法
- D3 js折叠式图表增加弧度曲线半径
- 如何在d3.js中通过计算' index '值来增加动画延迟