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.arc()
.innerRadius(0)//内半径
.outerRadius(150);//外半径
Canvas
canvas是通过js来绘制2d图形
特点:
- 位图,放大后会失真
- 不支持事件处理器
- 能以.png .jpg保存图像
- 适合游戏
图形操作
建议用svg,因为d3提供了众多svg图形的生成器
添加画布
var svg = d3.select("body").append("svg").attr("width",300).attr("height",300);
绘制矩形
矩形的属性
var dataset = [250,210,170,130,90];
var rectHeight = 25;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",20)
.attr("y",function(d,i){
return i*rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
- enter() :有数据而没有足够的图形元素时,可以使用此方法添加足够的元素
比例尺
将某一区域的值映射到另一个区域,其大小关系不变
线性比例尺
var min=d3.min(dataset);
var max=d3.max(dataset);
var linear=d3.scale.linear()//线性比例尺
.domain([min,max])//定义域
.range([0,300]);//值域
返回值可以当函数用
序数比例尺
var ordinal=d3.scale.ordinal()
.domain(index)
.range(color);
颜色比例尺
var color=d3.scale.categroy();//有10种颜色的比例尺
坐标轴
svg中没有坐标轴,但是有组件 d3.svy.axis()
定义坐标轴
var axis=d3.svg.axis()
.scale(linear)//指定比例尺
.orient("bottom")//指定刻度的朝向
.ticks(7);//指定刻度数量
添加坐标轴
svg.append("g").call(axis); //call()价格当前选择集作为参数传递给此函数
与
axis(svg.append(g));
等价
设定坐标轴的位置
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")//坐标轴的位置
.call(axis);
动态效果
transition()
启动过渡效果
.attr("fill",red)
.transition()
.attr("fill",blue)
duration()
指定过渡的持续时间,参数为时间,单位为毫秒
ease()
指定过渡的方式
ease(“bounce”)
- linear:普通线性变化
- circle:慢慢到达变换的最终状态
- elastic:带有弹跳的到达最终状态
- bounce:在最终状态弹跳几次
delay()
指定延迟事件,一定时间后才开始转变,单位为毫秒
update, enter, exit
绑定的数据和元素个数不符,分为两个部分分别处理
交互操作
在d3中每个选择集都有一个on函数用于添加事件监听器
鼠标事件
- click:鼠标单机某元素(mousedown+mouseup)
- mouseover:光标放在某元素上
- mouseout:光标从某元素上移出来
- mousemove:鼠标被移动
- mousedown:鼠标被按下
- mouseup:鼠标按钮被松开
- 双击:没有 click+延迟判定来模拟(还不会)
键盘事件
- keydown:按下任意键触发
- keypress:按下字符键触发
- keyup:释放键触发
触屏
- touchstart:触摸点放在触摸屏上时
- touchmove:触摸点移动
- touchend:触摸点拿开
布局
布局的作用就是计算出适合于作图的工具
Bundle
Chord
Cluster
Force 力导向图
var nodes = [ { name: "桂林" }, { name: "广州" },
{ name: "厦门" }, { name: "杭州" },
{ name: "上海" }, { name: "青岛" },
{ name: "天津" } ];
var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 6 } ];
var force = d3.layout.force()
.nodes(nodes) //指定节点数组
.links(edges) //指定连线数组
.size([width,height]) //指定作用域范围
.linkDistance(150) //指定连线长度
.charge([-400]); //相互之间的作用力
force.start(); //开始作用
Histogram
Pack
Partition
Pie 饼图
var pie=d3.layout.pie();
var piedata=pie(dataset);