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

D3JS学习笔记

2024-07-15 00:33:47   221人阅读

一、引入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绘图基本教程


联系
我们