D3.js“长大"3d 条形图的路径动画 [英] D3.js "growing up" path animation for 3d bar chart
本文介绍了D3.js“长大"3d 条形图的路径动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将经典动画添加到伪 3D 条形图.用 rect 正确地做到这一点非常简单.但是路径呢?
I am trying to add classic animation to pseudo-3D bar chart. It's very simple to do it right with rect. But what about path ?
对于 3d 效果,我有三个基本路径:如何制作和谐的成长动画?
I have three basic paths for the 3d effect: How to make a harmonious growing animation?
createColumns(bars, data) {
//...skip code
bars
.data(data)
.append('path')
.attr(
'd',
(d) => `M 0,0 V ${rectHeight(d.value)} H ${rectWidth()} V 0 H 0 Z`,
)
.attr('class', 'forward-bar')
.classed('bar', true);
bars
.data(data)
.append('path')
.attr(
'd',
() =>
`M 0,0 L ${rectWidth()},0 L ${
rectWidth() + depth
}, ${-depth} H ${depth} Z`,
)
.attr('class', 'top-bar')
.classed('bar', true);
bars
.data(data)
.append('path')
.attr(
'd',
(d) =>
`M ${rectWidth()},0 L ${rectWidth() + depth},${-depth}, V ${
rectHeight(d.value) - depth
} L ${rectWidth()} ${rectHeight(d.value)} Z`,
)
.attr('class', 'side-bar')
.classed('bar', true);
}
推荐答案
通过 D3 Transition 实现(以毫秒为单位设置持续时间):
Implemented with D3 Transition (set duration in milliseconds):
const add3DBar = (parent, xPos, yPos, width, height, depth, duration) => {
const g = parent.append('g').attr('transform', `translate(${xPos}, ${yPos})`);
g.append('path')
.attr('d', `M 0,0 V ${0} H ${width} V 0 H 0 Z`)
.style('fill', '#000081')
.transition()
.duration(duration)
.attr('d', `M 0,0 V ${-height} H ${width} V 0 H 0 Z`);
g.append('path')
.attr('d', `M 0,${0} L ${depth},${-depth} H ${depth + width} L ${width},0 Z`)
.style('fill', '#0000FF')
.transition()
.duration(duration)
.attr('d', `M 0,${-height} L ${depth},${-height-depth} H ${depth + width} L ${width},${-height} Z`);
g.append('path')
.attr('d', `M ${width},0 L ${width + depth},${-depth}, V ${-depth} L ${width},0 Z`)
.style('fill', '#0000C0')
.transition()
.duration(duration)
.attr('d', `M ${width},0 L ${width + depth},${-depth}, V ${-height-depth} L ${width},${-height} Z`);
}
const svg = d3.select('svg');
add3DBar(svg, 30, 150, 30, 100, 10, 500);
add3DBar(svg, 70, 150, 30, 70, 10, 1000);
add3DBar(svg, 110, 150, 30, 120, 10, 1500);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg>
</svg>
这篇关于D3.js“长大"3d 条形图的路径动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文