首页 > 代码库 > D3JS学习笔记

D3JS学习笔记

一、引入d3.js

可以到官网下载,然后引入到工程中去。

或者直接用d3远程的js,只要引入下面一行代码即可使用。
注:d3和百度的echarts中的esl.js冲突,d3会失效。

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

 

二、选择生成图形位置

var svg = d3.select("#main")//选择页面中id=main的元素,也可以直接选择div,p标签等,例.select("div")  .append("svg")//生成svg标签  .attr("width", w)//设定svg区域的宽度  .attr("height", h);//设定svg区域的高度

 

这样页面上就会有一个空白的宽为w,高为h的空白svg区域。(d3默认长度单位是px,即可省略不写px)
这个高度也可以从页面中的div获取,例如:

var h = document.getElementsByClassName("panel-body").offsetHeight;

 

三、绑定数据

var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];//用于生成柱形图的数据svg.selectAll("rect")//选择rect,主意此时页面中没有rect(rect是英文rectangle(矩形)的缩写,是svg中内置的图形函数)            .data(dataset)//传入数据            .enter()//这个enter为了根据上一行中dataset的个数,循环生成不存在的rect元素,即重复画矩形            .append("rect")//固定语法,先select选择,后enter生成,然后append绑定            .attr("x", 0)//当前的矩形左上角坐标位置            .attr("y", 0)            .attr("width", 20)//矩形的宽度            .attr("height", 100);

 

以上代码运行之后会生成一个黑色的柱形,其实生成了20个柱子,在页面中审查元素即可发现有20个svg,只不过左上角坐标位置一样,所以生成了20个都叠在一起了,其实svg绘图还是有顺序之分的,即后生成的图形会盖住之前的,这个符合常理所以不详细说明。

这里还有一个知识点:attr和style同样都可改变element,attr可改变任意属性,style只能改变样式。

大力推荐:svg绘图基本教程