D3.js基础(1)
2018-02-28 本文已影响28人
风之化身呀
选择 D3：如果希望开发脑海中任意想象到的图表。
选择 Highcharts、Echarts 等：如果希望开发几种固定种类的、十分大众化的图表。
1、选择元素
可链式操作，类似jQuery，调用方是d3或dom元素
- select
单选 d3.select - selectAll
多选
2、绑定数据
调用方是被选中的元素(集)
- datum
绑定字符串 - data
绑定数组
当选择集需要使用被绑定的数据时，常需要使用匿名函数function(d,i)。其包含两个参数，其中：
d 代表数据，也就是与某元素绑定的数据。
i 代表索引，代表数据的索引号，从 0 开始。
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
});
3、插入元素
- append
之后插入 - insert
某节点之前插入
body.insert("p","#myid")
.text("insert p element");
4、删除元素
- remove
5、图表类
要绘图，首要需要的是一块绘图的“画布”，HTML 5 提供两种强有力的“画布”：SVG 和 Canvas。
D3 虽然没有明文规定一定要在 SVG 中绘图，但是 D3 提供了众多的 SVG 图形的生成器，它们都是只支持 SVG 的。因此，建议使用 SVG 画布。
// 如下svg
<svg>
<rect></rect>
<rect></rect>
</svg>
// 如下js
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //数据（表示矩形的宽度）
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
d3.select('svg').selectAll("rect")
.data(dataset)
.enter() //指定选择集的enter部分
.append("rect") //添加足够数量的矩形元素
.attr("x",20) // 设置rect属性（x,y,width,height）
.attr("y",function(d,i){
return i * rectHeight;
})
.attr("width",function(d){
return d;
})
.attr("height",rectHeight-2)
.attr("fill","steelblue");
有数据，而没有足够图形元素的时候，enter和append结合使用可以添加足够的元素。
6、比例尺
- 线性比例尺
domain:定义域；range:值域
var min = d3.min(dataset);
var max = d3.max(dataset);
// 线性比例尺 linear
var linear = d3.scale.linear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300
- 序数比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
7、坐标轴
//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 250]);
// 定义坐标轴
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(7); //指定刻度的数量
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
// 指定样式
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
8、动态图表
- transition
- ease
接受：
linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次 - duration
- delay
9、Update、Enter、Exit
Update、Enter、Exit 是 D3 中三个非常重要的概念，它处理的是当选择集和数据的数量关系不确定的情况。
10、使用on函数添加交互
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect") //把类里的 fill 属性清空
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.attr("x", function(d,i){
return xScale(i) + rectPadding/2;
} )
.attr("y",function(d){
return yScale(d);
})
.attr("width", xScale.rangeBand() - rectPadding )
.attr("height", function(d){
return height - padding.top - padding.bottom - yScale(d);
})
.attr("fill","steelblue") //填充颜色不要写在CSS里
.on("mouseover",function(d,i){
d3.select(this) // 表示选中当前元素
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
});
监听器函数中都使用了 d3.select(this)，表示选择当前的元素，this 是当前的元素，要改变响应事件的元素时这么写就好
11、布局
布局的作用是：将不适合用于绘图的数据转换成了适合用于绘图的数据。
D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
12 个布局中，层级图（Hierarchy）不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来，能够使用的布局是 11 个（有 5 个是由层级图扩展而来）。这些布局的作用都是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。
