数据可视化 d3js学习之简单的柱状图(bar)

最新推荐文章于 2022-12-01 17:37:05 发布

upc_young

最新推荐文章于 2022-12-01 17:37:05 发布

阅读量6.6k

点赞数 2

分类专栏： d3js 文章标签： bar 柱状图数据可视化实战 d3 数据可视化

本文链接：https://blog.csdn.net/upc_young/article/details/44940071

版权

本文介绍了如何使用d3.js（版本3）创建带有坐标轴的动态柱状图。通过数据驱动的方法，利用enter()、exit()方法管理DOM元素，d3.scale对象和d3.svg.axis()定义坐标轴。文章还强调了enter().append()和rects.exit().remove()在更新数据时的作用，以及如何实现动画效果。通过代码示例，展示了如何使柱状图数据变化更明显，并给出了关于避免链式语法影响动画效果的提示。

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

摘要：使用d3js（v3）实现带坐标轴且基于数据驱动的简单柱状图。此demo用于本人理解基于数据进行可视化的enter()、exit()方法，d3.scale对象定义映射（比例尺），d3.svg.axis()定义坐标轴，transform()实现简单的动画效果。

JS代码：

    <script>
        //定义svg的内补，内补用于安排坐标轴或其他元素
        var padding = { top: 30, right: 30, bottom: 30, left: 30 };
        //定义svg的尺寸，450和600为真实画布的大小
        var h = 450 + padding.top + padding.bottom;
        var w = 600 + padding.left + padding.right;
        //定义数据
        var ds = [
            { category: "一月", amount: 20 },
            { category: "二月", amount: 90 },
            { category: "三月", amount: 50 },
            { category: "四月", amount: 33 },
            { category: "五月", amount: 172 },
            { category: "六月", amount: 20 },
            { category: "七月", amount: 120 },
            { category: "八月", amount: 180 }
        ];


        //draw&update
        function update() {
            //随机的amount属性用于模拟动态变化的数据
            ds = ds.map(function (d) {
                return {
                    category: d.category,
                    amount: Math.floor(Math.random() * (Math.random() * 100 + 100))
                };
            });
            //使用enter()及append()可视化元素，追加元素总是使用经enter()初始化过的selection[s]
            var enter = d3.selectAll("svg").data([ds]).enter().append("svg").attr({
                width: w,
                height: h
            });

            //选取被可视化后的元素（非追加元素的操作使用）
            var svg = d3.select(