d3.js
d3.js是基于数据操作文档的js库,集强力可视化组建与数据驱动型的dom操作手法于一身。
本质上是js,在数据可视化方面,d3将生成可视化的步骤精简到了几个简单的函数。
来源:http://d3.decembercafe.org/pages/lessons/1.html
安装及使用
使用d3
- 下载d3.js的文件 在html文件中包含即可
-
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
预备知识
- html:设定网页内容
- css:设定网页样式
- javascript:设定网页行为
- dom:修改文档的内容和结构
- svg:缩放矢量图形,用于绘制可视化的图形
ide for mac
- IntelliJ IDEA
- Pycharm
d3语法
链式语法
d3.select("body").selectAll("p").text("hello world");
选择数据
使用d3.select()``````d3.selectAll()
选择元素后返回的对象就是选择集
d3.select()
:选择所有指定元素的第一个d3.selectAll()
:选择指定元素的全部- 选择某个元素:
- 加id号 select("#myid");
- 选择其中几个元素:
- 添加class selectAll(".myclass");
- 对于已经绑定数据的选择集,可以运用无名函数function(d,i),d为绑定的数据,i为索引号,可以用条件判定语句来选择元素。
绑定数据
绑定到dom上
- p.datum(data):绑定一个数据data到选择集p上
- p.data(dataset):绑定一个数组到选择集上,数据的各项值分别与选择集的各元素绑定
插入元素
- body.append(“p”) :在body的末尾添加一个p元素
- body.insert(“p”,"#myid"):body中id为myid的元素前添加一个p元素
删除元素
var p=body.select("#myid");
p.remove();
做图表
画布
SVG
可缩放矢量图形,用于描述二维矢量图形的一种图形格式,使用xml格式来定义图形,可以直接嵌入html中显示。
特点:
- 矢量图,放大不失真
- 基于xml,可为每个元素添加javascript事件处理器
- 每个图形军事为对象,更改对象的属性,图形也会改变
- 不适合游戏
预定义元素
矩形
<rect>
属性:
- x :矩形左上角的x坐标,x轴水平向右
- y :矩形左上角的y坐标,y轴垂直向下
- width : 矩形的宽度
- height :矩形的高度
圆形
<circle>
属性:
- cx:圆心x坐标
- cy:圆心y坐标
- r:半径
椭圆
线段
<line>
属性:
- stroke:颜色
- strock-width:宽度
折线
多边形
路径
<path>
属性:
- d:
分组元素
<g>
文字
<text>
生成器
弧生成器
var arc=d3.svg.