<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>
< src=\"https://d3js.org/d3.v5.min.js\"></ >
< >
// 数据
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: 20, right: 50, bottom: 50};
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 + \')\');
// 表头
g.append(\'text\').attr(\'transform\', \'translate(\' + (width/2 - padding.left) + \',0)\')
.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]);})
.attr(\'fill\', function(d) {
return \'#\'+Math.floor(Math.random()*0xffffff).toString(16);
})
.transition().delay(function(d, i) {return (i + 1) * 50}).duration(2000).ease(d3.easeBounceIn)
.attr(\'y\', function(d) {return y(d.value);})
.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);
});
</ >
</html>
继续阅读与本文标签相同的文章
上一篇 :
京督生活电器应邀参加中国义博会，高品质赢得好口碑
下一篇 :
汇丰研究：升腾讯目标价至433港元 评级“买入”
-
陆奇：看好5G技术，但应用好5G还需要时间
2026-05-14栏目： 教程
-
在Visual Studio中使用clang-tidy进行代码分析
2026-05-14栏目： 教程
-
甘薇贾跃亭曝出离婚消息，贾跃亭破产前转账51万美元，作为“家庭费用”
2026-05-14栏目： 教程
-
指静脉识别黑科技加身，6.9秒破百，体验纯电动轿跑零跑S01
2026-05-14栏目： 教程
-
首届中国工业互联网大赛在乌镇开赛
2026-05-14栏目： 教程