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

最新推荐文章于 2025-06-18 18:02:55 发布

原创

最新推荐文章于 2025-06-18 18:02:55 发布 · 4k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#D3.js #柱状图

本文通过实例代码介绍了使用D3.js库创建带有动画效果的柱状图的全过程，展示了如何利用D3.js的动画功能为图表增添动态视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图，如下图所示：
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>D3</title>
    <style>
        body {
   
   
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 14px;
        }

        .bar {
   
   
            border: 1px solid #0b3536;
            border-radius: 6px;
            fill: #0098d8;
        }

        #bar .barText {
   
   
            fill: #f5faf8;
            font-weight: 500;
        }

        .axisY text,
        .axisX text,
        .headerText text {
   
   
            fill: #0b3536;
        }

        #bar svg {
   
   
            background-color: #f5faf8;
        }
    </style>
</head>

<body>
    <div class='container'>
        <div id='bar'></div>
    </div>
</body>

</html>
<script src="/static/js/d3.js"></script>
<script>
    /** V4柱状图初始化 **/
    function BarInit(width, height, rectHeight, rectPadding, padding, data) {
   
   

        // 获取x轴的数据
        var Xdatas = data.map(function (d) {
   
   
            return d.key;
        });

        // 获取y轴的数据
        var values = data.map(function (d) {
   
   
            return d.value;
        });

        // 创建X,Y轴比例尺
        var xScale = d3.scaleBand().domain