D3 的全称是（Data-Driven Documents），一个 JavaScript 的函数库，使用它主要是用来做数据可视化的；官网：http://d3js.org/

12 个布局：

层级图（Hierarchy）、
集群图（Cluster）、
打包图（Pack）、
分区图（Partition）、
树状图（Tree）、
矩阵树图（Treemap）、
饼状图（Pie）、
力导向图（Force）、
弦图（Chord）、
捆图（Bundle）、
直方图（Histogram）、
堆栈图（Stack）、

操作

1.选择
d3.select()：选择所有指定元素的第一个
d3.selectAll()：选择指定全部元素
d3.select("#id").text(“SWUSTVIS”).attr(“font-size”,“12px”);//选择body中id元素
d3.select(".class").text(“SWUSTVIS”).attr(“font-size”,“12px”);;//选择body中class类元素

2.绑定
datum()：绑定一个数据到选择集上
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
p.data(data).text(function(d, i){return "I love " + d;});

3.插入
append()： 插入末尾
insert()： 插入前面
d3.select(“body”).append(“p”).text(“Star”);//全部后面
d3.select(“body”).insert(“p”,"#moon").text(“Star”);//某个前面

4.删除
d3.select("#moon").remove();

SVG

SVG 绘制的是矢量图，因此对图像进行放大不会失真，可以为每个元素添加 JavaScript 事件处理器;
注意:在 SVG 中，x 轴的正方向是水平向右，y 轴的正方向是垂直向下的。

线性比例尺

线性比例尺，能将一个连续的区间，映射到另一区间,
d3.scale.linear() 返回一个线性比例尺,
domain() 和 range() 分别设定比例尺的定义域和值域,
d3.min(dataset) 和 d3.max(dataset); 最大和最小值
var linear = d3.scale.linear().domain([min, max]).range([0, 300]) // 例如
linear(2.3); //返回 175

序数比例尺

序数比例尺，定义域和值域不一定是连续的
var ordinal = d3.scale.ordinal()domain(index).range(color);
ordinal(2); //返回 green

mapbox

在使用mapbox之前需要到官网去注册账号，然后会拿到一个Access tokens，只有拿到了这个token你才能使用mapbox地图;
react安装：$ sudo cnpm install mapbox-gl --save