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); }); // 设置最后效果
原文地址：https://www.cnblogs.com/buerBlog/p/8548503.html