【D3.js数据可视化系列教程】--（十）更自由的条形图

最新推荐文章于 2022-09-28 23:10:04 发布

司机大傻

最新推荐文章于 2022-09-28 23:10:04 发布

阅读量1.3w

点赞数 10

分类专栏：数据可视化 D3数据可视化系列教程文章标签： d3 d3.js d3js 数据可视化

本文链接：https://blog.csdn.net/tianxuzhang/article/details/11370851

版权

数据可视化同时被 2 个专栏收录

44 篇文章 48 订阅

订阅专栏

D3数据可视化系列教程

36 篇文章 205 订阅

订阅专栏

1. 准备数据

绘制条形图的输入数只需要一个表示每个条数据量的数组就行。

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

2. 创建SVG元素

var w = 500;
var h = 100;
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

3. 绘制矩形条

这里会使用D3经典的select-data-enter-append-attr/style的编程套路。
也就是选择元素-绑定数据-添加新元素的占位符-添加元素-设置属性或样式。
这一组操作符是D3最常用的，大家一定要熟记以后几乎每个图都会用。这套路以后会单独介绍，这里只进行简要的注释。

svg.selectAll("rect") // 选择一组数据，这个时候还没有元素
    .data(dataset) // 加载数据集
    .enter() // 给新增数据添加占位符，表示将要添加一个元素
    .append("rect") //添加矩形元素
    // 这里属性的设置后面单说

4. 矩形条的属性和样式

我们绘制的思路是：

条宽

条宽 = 条实际宽度 + 间隙的宽度。

其中条宽 = (w / dataset.length）

间隙的宽度 = barPadding

条高

条高 = 条长-纵坐标（纵坐标是从上到下计算，即下方向为正）即条高 = h - (d * 4)

条的颜色

条的颜色用据数据集生成的动态RGB值填充。

所以结合上面分析结果就是：

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return i * (w / dataset.length);
   })
   .attr("y", function(d) {
        return h - (d * 4);
   })
   .attr("width", w / dataset.length - barPadding)
   .attr("height", function(d) {
        return d * 4;
   })
   .attr("fill", function(d) {
        return "rgb(0, 0, " + (d * 10) + ")";
   });

这里司机多说一句：

.attr("x", function(d, i) {
    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
})

很多初学者看不懂这里的.attr("x", function(d, i)，其实看前面的文章大家应该知道，x属性代表矩形的起点位置。这个匿名函数的入参两个d和i，分别代表当前元素绑定的数据值，当前元素的索引（第几个元素）。d和i的名字可以换成其他单词。

5. 文本标记（可是数值）

同理，添加文本并指定文本的XY坐标，其中：

x坐标：i * (w / dataset.length) + (w / dataset.length - barPadding) / 2; y坐标：h - (d * 4) + 14;

svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
        return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
    .attr("y", function(d) {
        return h - (d * 4) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");

6. 源码

<!DOCTYPE html>
<html>
  <head>
        <meta charset="utf-8">
        <title>testD3-8-drawBar.html</title>
        <script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script>
    <style type="text/css">
        </style>
    </head>
    <body>
        <script type="text/javascript">
            //SVG高宽
            var w = 500;
            var h = 100;
            var barPadding = 1;

            var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                            11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

            //创建SVG
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return i * (w / dataset.length);
               })
               .attr("y", function(d) {
                    return h - (d * 4);
               })
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                    return d * 4;
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 10) + ")";
               });

            svg.selectAll("text")
               .data(dataset)
               .enter()
               .append("text")
               .text(function(d) {
                    return d;
               })
               .attr("text-anchor", "middle")
               .attr("x", function(d, i) {
                    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
               })
               .attr("y", function(d) {
                    return h - (d * 4) + 14;
               })
               .attr("font-family", "sans-serif")
               .attr("font-size", "11px")
               .attr("fill", "white");
        </script>

    </body>
</html>