欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

程序员文章站 2022-06-23 20:41:00
现在用D3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。 还有数据都是自己定义的假数据，大家参考一下制作方法即可。 首先定义柱形图的数据、绘图区域的宽高、和上下左 ......

现在用d3.js + react做一个带坐标轴和比例尺的柱形图。我已经尽力把代码全部注释上了，最后我也会把完整柱形图代码奉上。如果还有疑惑的，可以去翻看一下我之前介绍的方法，以下方法都有介绍到。

还有数据都是自己定义的假数据，大家参考一下制作方法即可。

 

首先定义柱形图的数据、绘图区域的宽高、和上下左右的边距:

1 　　　　 var width = 600;                                //svg绘制区域的宽度
2         var height = 500;                               //svg绘制区域的高度
3         //定义数据
4         var datalist = [50,43,120,87,99,167,142]
5         //定义上下左右的边距
6         var padding = {top:20,right:20,bottom:100,left:100}

 

然后设定svg:

1 　　　　 var svg = d3.select("#body")                    //选择id为body的div
2                     .append("svg")                      //在<body>中添加<avg>
3                     .attr("width",width)                //设定<svg>的宽度属性
4                     .attr("height",height)              //设定<svg>的高度属性

 

定义比例尺:

 1  　　//定义比例尺
 2         //x轴宽度
 3         var xaxiswidth = 300;
 4         //y轴宽度
 5         var yaxiswidth = 300;
 6 
 7         //x轴比例尺(序数比例尺)
 8         var xscale = d3.scale.ordinal()                 //构建一个序数比例尺
 9                     .domain(d3.range(datalist.length))  //设定定义域
10                     .rangeroundbands([0,xaxiswidth],0.2)//代替range()设定值域，并将结果取整
11         //y轴比例尺(线性比例尺)
12         var yscale = d3.scale.linear()                  //创建一个线性比例尺
13                     .domain([0,d3.max(datalist)])       //设定定义域
14                     .range([0,yaxiswidth])              //设定值域

 

然后添加矩形:

 1 　　　　//添加矩形
 2             svg.selectall("rect")
 3                     .data(datalist)                     //绑定数据
 4                     .enter()                            //获取enter部分
 5                     .append("rect")                     //添加rect元素，使其与绑定数组的长度一致
 6                     .attr("fill","fuchsia")             //设置颜色
 7                     .attr("x",function(d,i){            //设置矩形的x坐标
 8                         return padding.left+xscale(i)
 9                     })
10                     .attr("y",function(d){              //设置矩形的y坐标
11                         return height - padding.bottom-yscale(d)
12                     })
13                     .attr("width",xscale.rangeband())   //设置矩形的宽度
14                     .attr("height",function(d){         //设置矩形的高度
15                         return yscale(d)
16                     })

 

然后为矩形添加文字标签:

 1  　　　　//为矩形添加标签文字
 2                 svg.selectall("text")
 3                     .data(datalist)                     //绑定数据
 4                     .enter()                            //获取enter部分
 5                     .append("text")                     //添加text元素，使其与绑定数组的长度一致
 6                     .attr("fill","white")               //字体颜色
 7                     .attr("font-size","14px")           //字体大小
 8                     .attr("text-anchor","middle")       //文本相对基点的位置
 9                     .attr("x",function(d,i){            //设置文字的x坐标
10                         return padding.left+xscale(i)
11                     }) 
12                     .attr("y",function(d){              //设置文字的y坐标
13                         return height - padding.bottom - yscale(d)
14                     })
15                     .attr("dx",xscale.rangeband()/2)    //相对于当前位置在x方向上平移的距离     
16                     .attr("dy","2em")                   //相对于当前位置在y方向上平移的距离
17                     .text(function(d){                  //文字内容
18                         return d
19                     })

 

最后定义坐标轴:

 1 　　//定义坐标轴
 2         //x轴
 3         var xaxis = d3.svg.axis()                       //创建一个默认的新坐标轴                       
 4                     .scale(xscale)                      //设定坐标轴的比例尺
 5                     .orient("bottom")                   //设定坐标轴的方向
 6         //重新设置y轴比例尺的值域，与原来的相反
 7         yscale.range([yaxiswidth,0])
 8         //y轴
 9         var yaxis = d3.svg.axis()                       //创建一个默认的新坐标轴    
10                     .scale(yscale)                      //设定坐标轴的比例尺
11                     .orient("left")                     //设定坐标轴的方向
12                     
13         //添加x轴和平移
14         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
15             .attr("class","axis")                       //定义class名
16             .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")")    //将x轴进行平移
17             .call(xaxis)                                //将自身作为参数传递给xaxis函数
18         //添加y轴和平移
19         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
20             .attr("class","axis")                       //定义class名
21             .attr("transform","translate("+padding.left+","+(height-padding.bottom-yaxiswidth)+")")    //将y轴进行平移
22             .call(yaxis)                                //将自身作为参数传递给yaxis函数

 

大家看一下效果图:

D3.js(v3)+react 制作 一个带坐标与比例尺的柱形图 (V3版本)

 

完整代码:

  1 import react, { component } from 'react';
  2 import * as d3 from 'd3';   //引入d3
  3 
  4 class bar extends component {
  5     constructor(props) {
  6         super(props);
  7         this.state = {}
  8     }
  9 
 10 
 11     componentdidmount(){            //将方法在componentdidmount生命周期钩子函数中面调用
 12         this.onemethod()
 13     }
 14 
 15     onemethod(){
 16         var width = 600;                                //svg绘制区域的宽度
 17         var height = 500;                               //svg绘制区域的高度
 18         //定义数据
 19         var datalist = [50,43,120,87,99,167,142]
 20         //定义上下左右的边距
 21         var padding = {top:20,right:20,bottom:100,left:100}
 22 
 23         var svg = d3.select("#body")                    //选择id为body的div
 24                     .append("svg")                      //在<body>中添加<avg>
 25                     .attr("width",width)                //设定<svg>的宽度属性
 26                     .attr("height",height)              //设定<svg>的高度属性
 27 
 28         //定义比例尺
 29         //x轴宽度
 30         var xaxiswidth = 300;
 31         //y轴宽度
 32         var yaxiswidth = 300;
 33 
 34         //x轴比例尺(序数比例尺)
 35         var xscale = d3.scale.ordinal()                 //构建一个序数比例尺
 36                     .domain(d3.range(datalist.length))  //设定定义域
 37                     .rangeroundbands([0,xaxiswidth],0.2)//代替range()设定值域，并将结果取整
 38         //y轴比例尺(线性比例尺)
 39         var yscale = d3.scale.linear()                  //创建一个线性比例尺
 40                     .domain([0,d3.max(datalist)])       //设定定义域
 41                     .range([0,yaxiswidth])              //设定值域
 42 
 43         //添加矩形
 44             svg.selectall("rect")
 45                     .data(datalist)                     //绑定数据
 46                     .enter()                            //获取enter部分
 47                     .append("rect")                     //添加rect元素，使其与绑定数组的长度一致
 48                     .attr("fill","fuchsia")             //设置颜色
 49                     .attr("x",function(d,i){            //设置矩形的x坐标
 50                         return padding.left+xscale(i)
 51                     })
 52                     .attr("y",function(d){              //设置矩形的y坐标
 53                         return height - padding.bottom-yscale(d)
 54                     })
 55                     .attr("width",xscale.rangeband())   //设置矩形的宽度
 56                     .attr("height",function(d){         //设置矩形的高度
 57                         return yscale(d)
 58                     })
 59                    
 60         //为矩形添加标签文字
 61                 svg.selectall("text")
 62                     .data(datalist)                     //绑定数据
 63                     .enter()                            //获取enter部分
 64                     .append("text")                     //添加text元素，使其与绑定数组的长度一致
 65                     .attr("fill","white")               //字体颜色
 66                     .attr("font-size","14px")           //字体大小
 67                     .attr("text-anchor","middle")       //文本相对基点的位置
 68                     .attr("x",function(d,i){            //设置文字的x坐标
 69                         return padding.left+xscale(i)
 70                     }) 
 71                     .attr("y",function(d){              //设置文字的y坐标
 72                         return height - padding.bottom - yscale(d)
 73                     })
 74                     .attr("dx",xscale.rangeband()/2)    //相对于当前位置在x方向上平移的距离     
 75                     .attr("dy","2em")                   //相对于当前位置在y方向上平移的距离
 76                     .text(function(d){                  //文字内容
 77                         return d
 78                     })
 79                     
 80         //定义坐标轴
 81         //x轴
 82         var xaxis = d3.svg.axis()                       //创建一个默认的新坐标轴                       
 83                     .scale(xscale)                      //设定坐标轴的比例尺
 84                     .orient("bottom")                   //设定坐标轴的方向
 85         //重新设置y轴比例尺的值域，与原来的相反
 86         yscale.range([yaxiswidth,0])
 87         //y轴
 88         var yaxis = d3.svg.axis()                       //创建一个默认的新坐标轴    
 89                     .scale(yscale)                      //设定坐标轴的比例尺
 90                     .orient("left")                     //设定坐标轴的方向
 91                     
 92         //添加x轴和平移
 93         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
 94             .attr("class","axis")                       //定义class名
 95             .attr("transform","translate("+padding.left + "," + (height-padding.bottom)+")")    //将x轴进行平移
 96             .call(xaxis)                                //将自身作为参数传递给xaxis函数
 97         //添加y轴和平移
 98         svg.append("g")                                 //在svg中添加一个包含坐标轴各元素的g元素
 99             .attr("class","axis")                       //定义class名
100             .attr("transform","translate("+padding.left+","+(height-padding.bottom-yaxiswidth)+")")    //将y轴进行平移
101             .call(yaxis)                                //将自身作为参数传递给yaxis函数
102 
103     }
104 
105     
106 
107     render() {
108         return (
109             <div id="body" >
110 
111             </div>
112         );
113     }
114 }
115 
116 export default bar;

 

 

这样，只带坐标轴和比例尺的柱形图就做完了。后续可以再添加过渡动画效果。

 

下一章给大家介绍带坐标轴和比例尺的散点图的制作。

 

上一篇： js中console.info的使用

下一篇： 冷笑话大全 小白兔笑话系列 16个全

推荐阅读