D3js入门 --- 柱状图的制作

作者: amCow | 来源:发表于2019-07-26 09:34 被阅读0次

D3js官网：https://d3js.org/
最近在研究D3js，索性总结一些文档出来，来总结一周以来的学习心得。
D3js官网全英文，相对于Echarts官网详细的文档，英文不好的同学，学起来可能要费劲些，不过有伙伴有中文翻译版的，附上链接：https://github.com/d3/d3/wiki/CN-Home

D3Js是什么

D3.js 是基于数据驱动文档工作方式的一款JavaScript函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一，它被很多其他的表格插件所使用。D3使你有能力借助HTML，SVG和CSS来生动地可视化各种数据。D3不需要你使用某个特定的框架，它的重点在于对现代主流浏览器的兼容，同时结合了强大的可视化组件，以数据驱动的方式去操作DOM。

浏览器支持

D3js和ECharts一样都是实现数据可视化的JS库，比较D3js和ECharts

D3支持的主流浏览器不包括IE8及以前的版本。D3测试了Firefox、Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行。
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

安装

常用的引入方式：

script标签引入

<script src="http://d3js.org/d3.v3.min.js"></script>

npm命令安装

npm install d3

由于D3版本v5和v4/v3存在较大的变动，本篇文章主要以v3为主，依次由浅入深的聊一聊d3js的具体使用。

D3如何用

api官网 https://github.com/d3/d3/wiki/API--%E4%B8%AD%E6%96%87%E6%89%8B%E5%86%8C
简单了解下，以下的demo要用到：

选择器

<body>
    <p>Hello World!</p>
    <p>Hello World!</p>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>
        var p = d3.select('body')
                  .selectAll('p')
                  .text('你好！')
        p.style("color", "red")
         .style("font-size", "72px")
    </script>
</body>

d3提供了丰富的dom操作，有点类似于jQuery的用法。
d3.select() 选择的是符合条件的第一个元素，它指定的为一个元素；
括号里面可以写标签、也可以写class名，id名，这点与jQuery神似

d3.select('body') //指定body标签内
或
d3.select('.red') //指定标签class名为red的第一个标签
或
d3.select('#blue') //指定标签ID名为blue的第一个标签

d3.selectAll('p') 选择的是所有p标签的元素，它指定的为一个集合；
.text('你好') 指定文档内容 content

p.style() 就是对p元素定义css样式
整个代码执行下来结果就是两行红色字体的 你好！

d3的很多写法都类似于jQuery，并不那么陌生。

datum

<body>
    <p>Hello World!</p>
    <p>Hello World!</p>

    <script src="../js/d3.v3.js"></script>
    <script>

        var str = "china"

        var body = d3.select('body')
        var p = body.selectAll('p')

        p.datum(str);

        p.text(function(d, i) {
            return "第" + i + "个元素绑定的数据是" + d
        })


    </script>
</body>

数据可视化的源泉在哪？dataset是数据源；

selection.datum - 取得或设置单个元素的数据，不必计算连接。

p.datum() //p标签的元素设置为str这个外部源

p.text() // 括号里接收一个函数回调，d就是str的值， i是索引
最后输出的结果：

第0个元素绑定的数据是china

第1个元素绑定的数据是china

data

<body>
    <p>Hello World!</p>
    <p>Hello World!</p>

    <script src="../js/d3.v3.js"></script>
    <script>

        var dataset = ["I like dogs","I like cats","I like snakes"];

        var body = d3.select('body')
        var p = body.selectAll('p')

        p.data(dataset);

        p.text(function(d, i) {
            return d
        })


    </script>
</body>

selection.data - 在计算相关的连接时，取得或设置一组元素的数据。
数据源有3个，而p标签仅有两个元素，所以输出到页面的结果为：

I like dogs

I like cats

svg

<script>
        var width = 400;
        var height = 400;
        var svg = d3.select('body')
                    .append('svg')
                    .attr('width', width)
                    .attr('height', height)
</script>

append 添加svg标签
attr svg设定宽高

柱状图

<script>
    var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）
    var width = 400;
    var height = 400;
    var svg = d3.select('body')
                .append('svg')
                .attr('width', width)
                .attr('height', height)
    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", 20)
        .attr("y", function(d, i){
             return i * rectHeight;
        })
        .attr("width", function(d){
             return d;
        })
        .attr("height", rectHeight-2)
        .attr("fill", "steelblue");
</script>

运行结果：

image.png

这里面注意到
.enter() 作用是在为缺失的元素返回占位符

线性比例尺

<script>
    // 线性比例尺
    var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

    var min = d3.min(dataset);
    var max = d3.max(dataset);

    var linear = d3.scale.linear()
                   .domain([min, max])
                   .range([0, 300])
    linear(0.9)
    console.log(linear(2.3)) // 175
</script>

d3.min() 返回最小值
d3.max() 返回最大值

d3.scale.linear() 构建一个线性比例尺
.domain() 取得或设置比例尺的定义域
.range() 取得或设置比例尺的输出范围

序数比例尺

<script>
    // 序数比例尺
    var index = [0, 1, 2, 3, 4];
    var color = ["red", "blue", "green", "yellow", "black"];
    var ordinal = d3.scale.ordinal() // 构造一个序数比例尺
                    .domain(index)  // 获取或指定比例尺的输入域
                    .range(color); // 获取或指定比例尺的输出范围
    console.log(ordinal(2)) // 175
</script>

线性比例尺的柱状图

<script>
    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

    var linear = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([0, 250])
    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

    var svg = d3.select("body")
                .append('svg')
                
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y",function(d,i){
             return i * rectHeight;
        })
        .attr("width",function(d){
             return linear(d);   //在这里用比例尺
        })
        .attr("height",rectHeight-2)
        .attr("fill","steelblue");
</script>

带x轴的柱状图

<style>
    .axis path,
    .axis line{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }
    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }
</style>
<script>
    var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];

    var linear = d3.scale.linear()
            .domain([0, d3.max(dataset)])
            .range([0, 250])
    var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)

    var svg = d3.select("body")
                .append('svg')
                
    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x",20)
        .attr("y",function(d,i){
             return i * rectHeight;
        })
        .attr("width",function(d){
             return linear(d);   //在这里用比例尺
        })
        .attr("height",rectHeight-2)
        .attr("fill","steelblue");
</script>

输出结果为：

image.png

带xy轴的柱状图

<style>
    .axis path,
    .axis line{
        fill: none;
        stroke: black;
        shape-rendering: crispEdges;
    }

    .axis text {
        font-family: sans-serif;
        font-size: 11px;
    }

    .MyRect {
        fill: steelblue;
    }

    .MyText {
        fill: white;
        text-anchor: middle;
    }

</style>
<script>
    //画布大小
    var width = 400;
    var height = 400;

    //在 body 里添加一个 SVG 画布   
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    //画布周边的空白
    var padding = {left:30, right:30, top:20, bottom:20};

    //定义一个数组
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        
    //x轴的比例尺
    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y轴的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

    //定义x轴
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        
    //定义y轴
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //矩形之间的空白
    var rectPadding = 4;

    //添加矩形元素
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });

    //添加文字元素
    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

    //添加x轴
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis); 
        
    //添加y轴
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);

</script>

image.png

带动画效果的柱状图

<script>
    //画布大小
    var width = 400;
    var height = 400;

    //在 body 里添加一个 SVG 画布   
    var svg = d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

    //画布周边的空白
    var padding = {left:30, right:30, top:20, bottom:20};

    //定义一个数组
    var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        
    //x轴的比例尺
    var xScale = d3.scale.ordinal()
        .domain(d3.range(dataset.length))
        .rangeRoundBands([0, width - padding.left - padding.right]);

    //y轴的比例尺
    var yScale = d3.scale.linear()
        .domain([0,d3.max(dataset)])
        .range([height - padding.top - padding.bottom, 0]);

    //定义x轴
    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
        
    //定义y轴
    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

    //矩形之间的空白
    var rectPadding = 4;

    //添加矩形元素
    var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding)
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .attr("height", function(d){
            return 0;
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        })

    //添加文字元素
    var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        })
        .attr("y",function(d){
            var min = yScale.domain()[0];
            return yScale(min);
        })
        .transition()
        .delay(function(d,i){
            return i * 200;
        })
        .duration(2000)
        .ease("bounce")
        .attr("y",function(d){
            return yScale(d);
        });

    //添加x轴
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
        .call(xAxis); 
        
    //添加y轴
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .call(yAxis);

</script>

D3js入门 --- 柱状图的制作

D3Js是什么

浏览器支持

安装

D3如何用

选择器

datum

data

svg

柱状图

线性比例尺

序数比例尺

线性比例尺的柱状图

带x轴的柱状图

带xy轴的柱状图

带动画效果的柱状图

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

D3