怎么学习d3.js

vue是一个数据驱动视图的前端框架，一切皆可作为可重用的组件加以使用

d3则是数据可视化javascript库

 

D3.js基础

1.学习D3.js的语法

语法是必需的，建议自行去官网上学习其语法，如果可以的话最好了解一下函数式编程的curry与compose思想，不建议一开始就去接触高大上的众多在线Demo。

2.学习D3.js的编程思路

　（1）语法其实可以体现其编程思路，起步当然是学习其强大的选择器：

    d3.select('body').style('background-color', 'black') 

// 直接选择 ->并设置属性

　d3.selectAll('p').style('color', function() { 

// 选择 -> 动态设置属性

return 'hsl(' + Math.random() * 360 + ', 100%, 50%)'

})

d3.selectAll('p').data([4,8,15,16,23,42]).style('font-size', function(d) {

// 选择 -> 绑定数据 -> 动态设置属性

return d + 'px'

})

(2) 接着是理解Update, Enter和Exit的思路

// Update…
var p = d3.select("body") // 直接把数据绑定到Dom并输出，数组元素个数与p节点的个数一致就全部更新文本，如果不一致，就只更新现有p节点的文本，多余的数据会被保存起来，看下面会用到
.selectAll("p")
.data([4, 8, 15, 16, 23, 42])
.text(function(d) { return d; });

// Enter…[常用]
p.enter().append("p") // 如果不一致，数组元素个数比p节点多，就插入p节点补足并相应更新文本
.text(function(d) { return d; });

// Exit…[常用]
p.exit().remove(); // 如果不一致，数组元素个数比p节点少，就删除多余的p节点

（3）然后要学习D3的画图一般思路，比如要画一个线状图，那么我们：

把输入的原始数据转化成为标准的D3可接受的数据格式 -> 根据原始数据定义好x轴函数、y轴函数和定义好作图方式(如d3.line) -> 在SVG上面画出x轴y轴、根据原始数据结合x轴及y轴函数作线状图 -> 再画出标题等细节的东西

（4）最后，给已经完成的图形添加动画效果

没有动画效果的图形看上去会比较乏味。动画基本写法如下：

// 把所有圆圈改变半径
d3.selectAll("circle").transition() // 定义动画
    .duration(750) // 动画持续时间
    .delay(function(d, i) { return i * 10; }) // 元素动画要延时多少时间开始
    .attr("r", function(d) { return Math.sqrt(d * scale); }); // 设置最后效果