Go语言视频零基础入门到精通

admin

D3.js的v5版本入门教程（第九章）
     

     一个完整的柱状图应该包括的元素有——矩形、文字、坐标轴，现在，我们就来一一绘制它们，这章是前面几章的综合，这一章只有少量新的知识点，它们是

  d3.scaleBand()：这也是一个坐标轴，可以根据输入的domain的长度，等分rangeRound域（类比range域）

  d3.range()：这个比较复杂，建议去看百度（或者官方API），在这里我只讲一下这个返回一个等差数列


     1、得到SVG画布

1.         var marge = {top:60,bottom:60,left:60,right:60}
2.             var svg = d3.select("svg");//得到SVG画布
3.             var width = svg.attr("width");//得到画布的宽
4.             var height = svg.attr("height");//得到画布的长
5.             var g = svg.append("g")
6.                     .attr("transform","translate("+marge.top+","+marge.left+")");

复制代码

     2、数据集

1. var dataset = [10,20,30,23,13,40,27,35,20];

复制代码

     3、分别在x方向和y方向绘制坐标轴

1.         var xScale = d3.scaleBand()
2.                     .domain(d3.range(dataset.length))
3.                     .rangeRound([0,width-marge.left-marge.right]);
4.             var xAxis = d3.axisBottom(xScale);
5.                    
6.             var yScale = d3.scaleLinear()
7.                     .domain([0,d3.max(dataset)])
8.                     .range([height-marge.top-marge.bottom,0]);
9.             var yAxis = d3.axisLeft(yScale);

复制代码

     代码说明：
         -这里出现了d3.scaleBand()，这是一个坐标轴

         -d3.range(dataset.length)，前面说过，这里返回的是一个等差数列，dataset.length=9，所以返回的是0到8的等差数列，其实d3.range()这个函数中可以有三个参数！如果想了解的话，建议去百度，不要看官方API（难找）

     4、为每个矩形和对应的文字创建一个分组<g>

1. var gs = g.selectAll(".rect")
2.                     .data(dataset)
3.                     .enter()
4.                     .append("g");

复制代码

     代码说明：

         -这里有牵涉到enter()，这回大家应该熟悉了吧！这里的返回值是一个包含有dataset.length个<g>元素的选择集
     5、绘制矩形

1. var rectPadding = 20;//矩形之间的间隙
2.             gs.append("rect")
3.                     .attr("x",function(d,i){
4.                             return xScale(i)+rectPadding/2;
5.                     })       
6.                     .attr("y",function(d){
7.                             return yScale(d);
8.                     })
9.                     .attr("width",function(){
10.                             return xScale.step()-rectPadding;
11.                     })
12.                     .attr("height",function(d){
13.                             return height-marge.top-marge.bottom-yScale(d);
14.                     })
15.                     .attr("fill","blue");

复制代码

     这可能有点复杂，因为需要计算矩形左上角的坐标和长宽！读者自己慢慢琢磨会比较好
     6、绘制文字

1. gs.append("text")
2.                     .attr("x",function(d,i){
3.                             return xScale(i)+rectPadding/2;
4.                     })
5.                     .attr("y",function(d){
6.             return yScale(d);
7.                 })
8.                 .attr("dx",function(){
9.                         (xScale.step()-rectPadding)/2;
10.                 })
11.                 .attr("dy",20)
12.                 .text(function(d){
13.                         return d;
14.                 })

复制代码

     这里也是一样，需要计算位置信息
     最后，附上截图
         
效果浏览：点击浏览效果
源码浏览：点击源码浏览

啦啦啦。。。

多谢分享