D3.js的v5版本入门教程（第六章）——做一个简单的图表

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

    

    从这一章开始，进入正式的d3,js绘图阶段，有了前面几章基本知识的积累，这样看接下来的绘图代码才不会觉得比较辛苦

    做一个简单的图表

    为了做一个简单的图表，我们还是需要以下新的知识点

• svg画布：svg绘制的是矢量图（还有canvas画布，这个是JavaScript用来绘制2D图像的，是位图）
• rect元素：是d3中在svg中绘制矩形的元素
• g元素：分组的时候使用

    有了这些知识后，我们开始绘制

    1、数据准备

var marge = {top:60,bottom:60,left:60,right:60}//设置边距
var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

    2、得到svg画布，并创建分组

var svg = d3.select("svg");//得到svg画布
    	var g = svg.append("g")//定义一个用来装整个图表的一个分组，并设置他的位置
    		.attr("transform","translate("+marge.top+","+marge.left+")");

    其中.attr(xxxx)是用来设置属性的，而这里的“transform”是用来设置位置，

    注意："translate("+marge.top+","+marge.left+")"这句话本质上是一个字符串，因为其中有变量，所以使用字符串拼接

    3、画出矩形

var rectHeight = 30;//设置每一个矩形的高度
    	
    	g.selectAll("rect")
    		.data(dataset)
    		.enter()
    		.append("rect")
    		.attr("x",20)//设置左上点的x
    		.attr("y",function(d,i){//设置左上点的y
    			return i*rectHeight;
    		})
    		.attr("width",function(d){//设置宽
    			return d;
    		})
    		.attr("height",rectHeight-5)//设置长
    		.attr("fill","blue");//颜色填充

    其中g.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect") 我们在前面已经学过这段话表示添加足够的rect元素（也就是enter的用法）

   运行结果：

效果预览：点击浏览效果

源码浏览：点击源码浏览