d3.js v5 实现横向直方图，并实现显示动画效果

最新推荐文章于 2021-09-26 12:51:14 发布

cjy12138

最新推荐文章于 2021-09-26 12:51:14 发布

阅读量1.7k

点赞数 2

分类专栏： d3.js 文章标签： d3.js 直方图动画效果

本文链接：https://blog.csdn.net/cjy12138/article/details/85162982

版权

本文介绍了如何使用d3.js v5库创建横向直方图，并详细展示了实现直方图动画效果的代码，帮助读者理解直方图的动态展示方法。

摘要由CSDN通过智能技术生成

横向直方图效果（没截gif，不过代码可以实现动画）：

代码实现：

<html>
	<body></body>
	<style>
		div{
			background: #F2F4FF;
			width: 100px;
			height: 40px;
			position: absolute;
			opacity: 0;
			text-align: center;
			font-size: 12px;
			line-height: 40px;
		}
	</style>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
		//数据
		let data = [{
            key: 'aa',
            value: 32
        },
        {
            key: 'bb',
            value: 26
        },
        {
            key: 'cc',
            value: 45
        },
        {
            key: 'dd',
            value: 38
        },
        {
            key: 'ee',
            value: 52

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

cjy12138

关注关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
d3.js v5 实现横向直方图，并实现显示动画效果

横向直方图效果（没截gif，不过代码可以实现动画）：代码实现：&lt;html&gt; &lt;body&gt;&lt;/body&gt; &lt;style&gt; div{ background: #F2F4FF; width: 100px; height: 40px; position: absolute; opacity: 0; t...
复制链接

扫一扫