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

最新推荐文章于 2021-05-25 09:13:32 发布

cjy12138

最新推荐文章于 2021-05-25 09:13:32 发布

阅读量1.8k

点赞数

分类专栏： d3.js 文章标签： d3.js 直方图竖向直方图

d3.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果（没有截动图，不过代码可以实现）：

代码实现：

<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
        },
        {
            key: 'ff',
            value: 48
        },
        {
            key: 'gg',
            value: 50
        },
        {
            key: 'hh',
            value: 34
        },
        {
            key: 'ii',
            value: 37
        },
        {
            key: 'jj',
            value: 36
        },
		 {
            key: 'kk',
            value: 40
        }
    ]; 
	let Xdatas = data.map(function(d) {return d.key}),
		Ydatas = data.map(function(d) {return d.value});
	let width = 800, height = 500;
	let x = d3.scaleBand().domain(Xdatas).rangeRound([0, width]).padding(0.1);
	let y = d3.scaleLinear().domain([0, d3.max(Ydatas)]).rangeRound([height, 0]);
	
	let padding = {left: 50, top: 70, right: 50, bottom: 100};
	let svg = d3.select('body').append('svg').attr('width', width + padding.left)
		.attr('height', height + padding.bottom);
	let g = svg.append('g').attr('transform', 'translate(' + padding.left + ',' + padding.top + ')');
	// 表头
	svg.append('text').attr('transform', 'translate(' + (width/2 - padding.left) + ',' + padding.top/2 + ')')
		.attr('font-weight', 600).text('D3.js 直方图');
	// x轴和y轴
	g.append('g').attr('transform', 'translate(0,' + height + ')')
		.call(d3.axisBottom(x));
	g.append('g').call(d3.axisLeft(y).ticks(10));
	
	chart = g.selectAll('.bar').data(data).enter().append('g');
	// 矩形
	chart.append('rect')
		.attr('x', function(d) {
			return x(d.key);
		})
		.attr('cursor', 'pointer')
		.attr('y', function(d) {
			return y(y.domain()[0]) - 5;
		})
		.attr('fill', function(d) {
			// 生成随机颜色
			return '#'+Math.floor(Math.random()*0xffffff).toString(16);
		})
		.attr('stroke', '#FFF').attr('stroke-width', '3px')
		.transition()
		.delay(function(d, i) {
			return (i + 1) * 50
		})
		.duration(2000).ease(d3.easeBounceIn)
		.attr('y', function(d) {
			return y(d.value) - 5;
		})
		.attr('width', x.bandwidth())
		.attr('height', function(d) {
			return height - y(d.value);
		});
	// 矩形文字
	chart.append('text').attr('fill', '#FFF')
		.attr('x', function(d) {
			return x(d.key) + 14;
		})
		.attr('y', function(d) {
			return y(y.domain()[0]);
		})
		.transition()
		.delay(function(d, i) {
			return (i + 1) * 100
		})
		.duration(2000).ease(d3.easeBounceIn)
		.attr('y', function(d) {
			return y(d.value);
		})
		.attr('dx', function(d) {
			return (x.bandwidth() - padding.left) / 2;
		})
		.attr('dy', 20)
		.text(function(d) {
			return d.value
		});
	// 悬浮提示框
	tooltip = d3.select('body').append('div');
	
	// hover事件
	chart.on('mouseover', function() {
		d3.select(this).attr('opacity', 0.5);
		// 悬浮在直方图上时，显示提示框
		tooltip.html('我是提示框').transition().duration(500).style('left', d3.event.pageX - 20)
			.style('top', d3.event.pageY + 20).style('opacity', 1.0);
	}).on('mouseout', function() {
		d3.select(this).transition().delay(100).duration(500).attr('opacity', 1.0);
	});
	// 当鼠标移出svg画布时，就将提示框隐藏掉，考虑到鼠标移出时显示的动画还未完成，需要加transition()过滤
	svg.on('mouseout', function() {
		tooltip.transition().style('opacity', 0);
	});
	</script>
</html>

转自：D3.js实现带动画效果的柱状图

查看横向直方图请点击横向直方图

cjy12138

关注

0
点赞
踩
9

收藏

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

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

扫一扫