D3 - 动态条形图制作

最新推荐文章于 2022-05-19 11:45:16 发布
最新推荐文章于 2022-05-19 11:45:16 发布
阅读量1.4k 收藏 34
点赞数 3
分类专栏： # 可视化技术 - D3实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/moon_sky1999/article/details/105974363
版权

数据来自csv文件。
绘制效果图：

在这里插入图片描述
数据集解释：数据信息为美国六个主要城市每个月的光照时间变化。

代码详细解释：

let Color = new Array();

    // 随机生成每个城市的代表颜色
    for (let i = 0; i < 6; ++i) {
        Color[i] = 'rgba(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + 0.8 + ')';
    }

首先生成所有城市的颜色。所有颜色的rgb数值均随机生成。

 // 构造比例尺
    xScale = d3.scaleLinear()
        .domain([0, 350])
        .range([0, w - inner.left - inner.right])
        .nice();

    xAxis = d3.axisBottom(xScale);

    svg.append("g")
        .attr("transform", "translate(" + inner.left + "," + (h - inner.bottom - 40) + ")")
        .call(xAxis);

构造下方的比例尺。将比例尺平放放在底部。

// 解析csv数据
    d3.csv("sunshine.csv").then(function (d) {
        Data = d;
        // 首先按月份排序
        Data.sort(function (a, b) {
            return a.monthnum - b.monthnum;
        });
        console.log(Data);
        draw();
    });

解析csv数据。注意这个过程是异步的，接下来所进行的所有操作均在draw函数中执行。

//右下方数值，表示月份
        let comment = svg.append("text")
            .attr("x", w - inner.right - inner.right)
            .attr("y", h - inner.bottom - inner.bottom - 40)
            .attr("fill", "black")
            .text(function () {
                return Data[idx].month;
            })
            .style("font-size", "40");

添加右下角的文本数据，表示当前状态所示的月份。

// 绑定该年的数据
        const groups = svg.selectAll("g")
            .data(DataEntry).enter()
            .append("g");

        // 生成标签和矩形
        let labels = groups.data(DataEntry)
            .enter().append("text")
            .text(d => d.city)
            .attr("x", function (d, i) {
                return inner.left - 10;
            })
            .style("font-size", 20)
            .attr("text-anchor", "end");

        let rects = groups.data(DataEntry)
            .enter().append("rect")
            .attr("x", inner.left)
            .attr("height", H * 0.65)
            .attr("fill", function (d, i) {
                return Color[i];
            })
            .attr("width", function (d) {
                return xScale(d.sunshine);
            });

数据主体部分，即表示数据的直方图以及数据旁边的城市名称。注意利用text-anchor来控制文本的对齐信息。此处为右对齐。

// 设定更新函数
        function UpdateElement() {

            // 通过data指定绑定的键值
            labels.data(DataEntry, d => d.city)
                .transition()
                .duration(600)
                .attr("y", function (d, i) {
                    return i * H + inner.bottom + 40;
                });

            rects.data(DataEntry, d => d.city)
                .transition()
                .duration(600)
                .attr("y", function (d, i) {
                    return i * H + inner.bottom;
                })
                .attr("width", function (d) {
                    return xScale(d.sunshine);
                });
        }

设定更新函数。
这里一定要注意，利用data来绑定更新数据，d => d.city为设置的绑定的键值。否则绑定其他信息会导致结果出错。

// 更新函数
        function update(t) {
            let W = new Array();
            for (let i = 0; i < 6; ++i)
                W.push(Data[t * 6 + i]);
            W.sort(function (a, b) {
                return b.sunshine - a.sunshine;
            });
            DataEntry = W;
            comment.text(DataEntry[0].month);
            UpdateElement();
        }

        // 调用更新函数,每0.7s更新一次
        setInterval(function () {
            update((++idx) % 12);
        }, 700);

设置更新函数以及调用更新函数。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7</title>
</head>
<body>
<script src="https://d3js.org/d3.v5.js"></script>
<script>

    let w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    let h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    w *= 0.98;
    h *= 0.90;

    let inner = {top: 100, right: 100, bottom: 50, left: 200};
    let xScale, xAxis;
    let DataEntry = new Array();
    let Data = new Array();
    let H = (h - inner.bottom - inner.top) / 6 * 0.95;
    let Color = new Array();

    // 随机生成每个城市的代表颜色
    for (let i = 0; i < 6; ++i) {
        Color[i] = 'rgba(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + 0.8 + ')';
    }

    // 添加画布
    let svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
        .append("g");

    // 构造比例尺
    xScale = d3.scaleLinear()
        .domain([0, 350])
        .range([0, w - inner.left - inner.right])
        .nice();

    xAxis = d3.axisBottom(xScale);

    svg.append("g")
        .attr("transform", "translate(" + inner.left + "," + (h - inner.bottom - 40) + ")")
        .call(xAxis);

    // 月份循环变量
    let idx = 0;

    // 解析csv数据
    d3.csv("sunshine.csv").then(function (d) {
        Data = d;
        // 首先按月份排序
        Data.sort(function (a, b) {
            return a.monthnum - b.monthnum;
        });
        console.log(Data);
        draw();
    });

    function draw() {

        //右下方数值，表示月份
        let comment = svg.append("text")
            .attr("x", w - inner.right - inner.right)
            .attr("y", h - inner.bottom - inner.bottom - 40)
            .attr("fill", "black")
            .text(function () {
                return Data[idx].month;
            })
            .style("font-size", "40");

        // 添加该月份的所有的城市信息
        for (let i = 0; i < 6; ++i)
            DataEntry.push(Data[idx * 6 + i]);
        DataEntry.sort(function (a, b) {
            return b.sunshine - a.sunshine;
        });
        // console.log(DataEntry);

        // 绑定该年的数据
        const groups = svg.selectAll("g")
            .data(DataEntry).enter()
            .append("g");

        // 生成标签和矩形
        let labels = groups.data(DataEntry)
            .enter().append("text")
            .text(d => d.city)
            .attr("x", function (d, i) {
                return inner.left - 10;
            })
            .style("font-size", 20)
            .attr("text-anchor", "end");

        let rects = groups.data(DataEntry)
            .enter().append("rect")
            .attr("x", inner.left)
            .attr("height", H * 0.65)
            .attr("fill", function (d, i) {
                return Color[i];
            })
            .attr("width", function (d) {
                return xScale(d.sunshine);
            });

        // 设定更新函数
        function UpdateElement() {

            // 通过data指定绑定的键值
            labels.data(DataEntry, d => d.city)
                .transition()
                .duration(600)
                .attr("y", function (d, i) {
                    return i * H + inner.bottom + 40;
                });

            rects.data(DataEntry, d => d.city)
                .transition()
                .duration(600)
                .attr("y", function (d, i) {
                    return i * H + inner.bottom;
                })
                .attr("width", function (d) {
                    return xScale(d.sunshine);
                });
        }

        UpdateElement();

        // 更新函数
        function update(t) {
            let W = new Array();
            for (let i = 0; i < 6; ++i)
                W.push(Data[t * 6 + i]);
            W.sort(function (a, b) {
                return b.sunshine - a.sunshine;
            });
            DataEntry = W;
            comment.text(DataEntry[0].month);
            UpdateElement();
        }

        // 调用更新函数,每0.7s更新一次
        setInterval(function () {
            update((++idx) % 12);
        }, 700);
    }

    svg.append("text")
        .text("Monthly Hours of Sunshine")
        .attr("x", w / 2)
        .attr("y", 30)
        .style("font-size", 25)
        .attr("text-anchor", "middle");

</script>
</body>
</html>

另附sunshine.csv中的数据

city,lon,lat,month,monthnum,sunshine
Seattle,-122.335167,47.608013,Jan,0,69
Seattle,-122.335167,47.608013,Feb,1,108
Seattle,-122.335167,47.608013,Mar,2,178
Seattle,-122.335167,47.608013,Apr,3,207
Seattle,-122.335167,47.608013,May,4,253
Seattle,-122.335167,47.608013,Jun,5,268
Seattle,-122.335167,47.608013,Jul,6,312
Seattle,-122.335167,47.608013,Aug,7,281
Seattle,-122.335167,47.608013,Sep,8,221
Seattle,-122.335167,47.608013,Oct,9,142
Seattle,-122.335167,47.608013,Nov,10,72
Seattle,-122.335167,47.608013,Dec,11,52
Chicago,-87.623177,41.881832,Jan,0,135
Chicago,-87.623177,41.881832,Feb,1,136
Chicago,-87.623177,41.881832,Mar,2,187
Chicago,-87.623177,41.881832,Apr,3,215
Chicago,-87.623177,41.881832,May,4,281
Chicago,-87.623177,41.881832,Jun,5,311
Chicago,-87.623177,41.881832,Jul,6,318
Chicago,-87.623177,41.881832,Aug,7,283
Chicago,-87.623177,41.881832,Sep,8,226
Chicago,-87.623177,41.881832,Oct,9,193
Chicago,-87.623177,41.881832,Nov,10,113
Chicago,-87.623177,41.881832,Dec,11,106
New York,-73.935242,40.73061,Jan,0,154
New York,-73.935242,40.73061,Feb,1,171
New York,-73.935242,40.73061,Mar,2,213
New York,-73.935242,40.73061,Apr,3,237
New York,-73.935242,40.73061,May,4,268
New York,-73.935242,40.73061,Jun,5,289
New York,-73.935242,40.73061,Jul,6,302
New York,-73.935242,40.73061,Aug,7,271
New York,-73.935242,40.73061,Sep,8,235
New York,-73.935242,40.73061,Oct,9,213
New York,-73.935242,40.73061,Nov,10,169
New York,-73.935242,40.73061,Dec,11,155
San Francisco,-122.446747,37.733795,Jan,0,165
San Francisco,-122.446747,37.733795,Feb,1,182
San Francisco,-122.446747,37.733795,Mar,2,251
San Francisco,-122.446747,37.733795,Apr,3,281
San Francisco,-122.446747,37.733795,May,4,314
San Francisco,-122.446747,37.733795,Jun,5,330
San Francisco,-122.446747,37.733795,Jul,6,300
San Francisco,-122.446747,37.733795,Aug,7,272
San Francisco,-122.446747,37.733795,Sep,8,267
San Francisco,-122.446747,37.733795,Oct,9,243
San Francisco,-122.446747,37.733795,Nov,10,189
San Francisco,-122.446747,37.733795,Dec,11,156
Houston,-95.358421,29.749907,Jan,0,144
Houston,-95.358421,29.749907,Feb,1,141
Houston,-95.358421,29.749907,Mar,2,193
Houston,-95.358421,29.749907,Apr,3,212
Houston,-95.358421,29.749907,May,4,266
Houston,-95.358421,29.749907,Jun,5,298
Houston,-95.358421,29.749907,Jul,6,294
Houston,-95.358421,29.749907,Aug,7,281
Houston,-95.358421,29.749907,Sep,8,238
Houston,-95.358421,29.749907,Oct,9,239
Houston,-95.358421,29.749907,Nov,10,181
Houston,-95.358421,29.749907,Dec,11,146
Miami,-80.191788,25.761681,Jan,0,222
Miami,-80.191788,25.761681,Feb,1,227
Miami,-80.191788,25.761681,Mar,2,266
Miami,-80.191788,25.761681,Apr,3,275
Miami,-80.191788,25.761681,May,4,280
Miami,-80.191788,25.761681,Jun,5,251
Miami,-80.191788,25.761681,Jul,6,267
Miami,-80.191788,25.761681,Aug,7,263
Miami,-80.191788,25.761681,Sep,8,216
Miami,-80.191788,25.761681,Oct,9,215
Miami,-80.191788,25.761681,Nov,10,212
Miami,-80.191788,25.761681,Dec,11,209
Xiao____Q
关注
  • 3
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
D3进阶--读取csv文件
ban2413的博客
12-23 6114
在 D3.js 中提供了 d3.csv() 函数来读取 CSV 文件。函数 API 可参见：https://github.com/mbostock/d3/wiki/CSV d3.csv("table.csv",function(error,csvdata){ if(error){ console.log(error); } ...
D3.js入门实例----制作动态条形图
qq_41756580的博客
05-29 4078
1.引入资源--js&lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.min.js" &gt;&lt;/script&gt;2.创建svg画布var svg=d3.select("body"
5.python爬虫实战：读取csv数据并绘制gif动图【Python】（测试代码+api例程）
MZH
05-19 785
5.python爬虫实战：读取csv数据并绘制gif动图【Python】（测试代码+api例程）
python读取CSV文件中温度值绘制3D折线图
wh806的博客
07-30 1925
python读取CSV文件中温度值绘制3D折线图 import pyecharts.options as opts from pyecharts.charts import Line3D import random import csv filename = ‘tests.csv’ week_en = “Saturday Friday Thursday Wednesday Tuesday Monday Sunday”.split() clock = ( "12a 1a 2a 3a 4a 5a 6a 7a 8
D3.js进阶系列之CSV表格文件的读取详解
10-19
D3.js支持从外部读取数据进行图形交互(Loading External Resources)，支持的格式有CSV、txt、Html、tsv、xml文本文件和JSON XML数据结构，下面这篇文章主要给大家介绍了D3.js中CSV表格文件读取的相关资料，需要的朋友可以参考下。
d3-bar-chart:使用d3制作的条形图用于freeCodeCamp数据可视化课程
03-28
条形图 使用d3制作的条形图用于freeCodeCamp数据可视化课程
D3-graph-gallery:用D3.js制作的一组简单图形
05-11
这个资源对于初学者和经验丰富的D3.js用户都是宝贵的，因为它展示了如何使用D3.js库来创建各种常见的数据可视化类型，如条形图、饼图、线图、散点图等。通过查看和研究这些示例的源代码，你可以学习到D3.js的基本...
d3-waterfall:d3.js中的瀑布图
05-13
D3.js，全称Data-Driven Documents，是一个强大的JavaScript库，用于创建数据驱动的文档，特别是在Web上制作交互式和动态的数据可视化。 在D3.js中实现**d3-waterfall**，我们可以利用其丰富的API和灵活的数据绑定...
条形图：用d3.js制成的条形图：）
02-17
关于 遵循以下列出的要求，使用d3.js制作的条形图： X轴是-z。 Y轴为-10到90（条形图可以位于x轴下方）。 X轴没有任何刻度。 在该示例中，没有下拉菜单，而是... 感谢： : 我观看了此视频，以学习d3条形图的基本知识
音频条形图
10-15
至于编程实现，如文章链接中提及的“RectAnimation”可能是指使用某种编程语言（如Python的matplotlib库，JavaScript的D3.js库等）创建动态的音频条形图。在实际应用中，开发者需要读取音频文件的数据，对数据进行...
d3.csv()后获取的数据不是数组，而是对象
weixin_30847271的博客
04-23 1249
我的csv文件： year,population 1953,5.94 1964,6.95 1982,10.08 1990,11.34 2000,12.66 2010,13.40 使用d3.csv()输出： d3.csv("Data/data.csv",function (error,data) { if(error){ console.lo...
d3数据可视化----CSV&JSON
yfdhn的专栏
08-12 5042
D3是JavaScript的数据可视化库（http:/）
d3 绘制平行坐标图 （多维csv数据共享）
陈杉菜
11-20 2861
数据可视化的作业（说实在我刚看到这个的时候有点不敢相信，因为我甚至不知道这是什么图 百度得到答案：（真的好官方没有太大用处系列） 平行坐标是可视化高维几何和分析多元数据的常用方法。 为了在n维空间中显示一组点，绘制由n条平行线组成的背景，通常是垂直且等距的。所述的点N 维空间被表示为折线与顶点在平行的轴线； 第i 轴上顶点的位置对应于该点的第i个坐标。 此可视化与时间序列可视化密切相关，除了它应用...
d3.csv()读取本地文件失败_报错Access to XMLHttpRequest at ‘file:‘ from origin ‘null‘ has been blocked_替换和解决方法
Jude_zhai的博客
06-12 4410
背景介绍： 最近在做一个数据可视化系统，对csv文件中数据进行处理后，以统计图表的形式实现可视化，使用的技术有JavaScript、D3、HTML。 由于D3提供了csv文件读取函数——d3.csv()，本想直接使用，但在运行系统的时候报出以下两个错误： Access to XMLHttpRequest at ‘file://’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only suppor
【 D3.js 进阶系列 — 1.0 】 CSV 表格文件的读取
热门推荐
十二月咖啡馆工作室
10-03 3万+
在入门系列的教程中，我们常用 d3.json() 函数来读取 json 格式的文件。json 格式很强大，但对于普通用户可能不太适合，普通用户更喜欢的是用 Microsoft Excel 或 OpenOffice Calc 等生成的表格文件，因为简单易懂，容易编辑。
javascript d3读取csv文件后如何获得promise中的数据（PromiseResult值）
weixin_45910845的博客
11-12 1962
这个问题困扰了我半多个小时，看了各种复杂的方法，结果最后发现用一行代码就可以解决！ 之前我用d3.csv 加载了一个csv文件， let mapDataP = d3.csv("../data/mapData.csv", d3.autoType); console.log(mapDataP); 但是返回的是一个promise对象，因为d3本质是异步加载。于是我们要获得promise中的promise result对象的值。 在看了各种复杂的$ajax和自创函数之类的方法之后，我在一个地方看到了.
大数据可视化技术-echarts03（D3获取数据）
qq_45786520的博客
06-29 1484
使用D3绘制图形，主要分为以下几个步骤完成： 1、引入Echarts； 2、为ECharts准备一个具备大小的Dom； 3、加载数据和整理数据； 4、设定图表的配置项； 5、使用指定的配置项和数据显示图表； 6、添加和修改图表样式。 ...
【D3.JS数据可视化实战记录】绘制条形图
平凡之路
10-11 4097
需要展现的json:
python绘制条形图用什么函数_如何用python绘制简单条形图？
weixin_39680121的博客
11-20 1107
展开全部如何用python绘制简单条形图呢？这里离不开matplotlib的使32313133353236313431303231363533e4b893e5b19e31333433646531用。条形图是数据可视化图形中很基础也很常用的一种图，简单解释下：条形图也叫长条图（英语：bar chart），亦称条图（英语：bar graph）、条状图、棒形图、柱状图、条形图表，是一种以长方形的长度为变...
vue3 d3 d3-celestial 绘制天球图
最新发布
05-30
要在Vue3中使用D3和D3-Celestial绘制天球图，可以按照以下步骤进行： 1. 安装D3和D3-Celestial 可以使用npm或yarn来安装D3和D3-Celestial： ``` npm install d3 d3-celestial ``` 或者 ``` yarn add d3 d3-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值