Demo的github地址 https://github.com/SmallWhiteRabbit/Vue-D3-V4，写的不是很完善，大致模型出来了
关于Vue
我的认识是从写这个Demo开始之前我就只看了api文档几次，觉得还好，这次写这个Demo的时候，又重头看了好几次这个文档，最后勉勉强强的把这个Demo做完，为什么选择用Vue是因为它的模块化，我想试一下这种模块化的开发模式，遇到的问题
1、关于Vue对象的参数methods、computed、mounted使用的场景
methods 方法 每当触发重新渲染时，调用方法将总会再次执行函数。
computed 计算属性 计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。如果相关依赖没有改变就读取缓存中的值
watch 监听属性 （异步的 具有监听功能，监听数据变化，做出相应的调整） 使用情景 ：数据变化时执行异步或开销较大的操作
这三种属性网上比较的很多，我直观的理解metho里面定义的方法是触发的情况是这个方法被调用的时候，computed触发的条件是它的依赖发生变化，所谓依赖就是它所使用的数据源，只要变它就触发，这个不适用于用户改变输入数据的情况，因为就算用户只输入了一个空格也会触发，用户还没有完成输入的时候也会触发，并不适用于把数据传给D3，D3再画图这种情况，中间的延时太长，会导致用户的体验感不好，所以我是在触发change事件的时候调用methods方法，watch这个属性做的时候没有考虑到这个监听功能，就没有比较
2、关于组件调用
第一步是生成组件
export default {
name: 'ForceD3',
mounted () {}
}
这句的意思就是将你写的模块封装在name为ForceD3这个组件里并暴露出去，通过名字可以找到
第二步调用
components: {
pie: require('./components/Pie.vue'),
ForceD3 // 通过name调用 否则会报错 [Vue warn]: Failed to mount component:
// template or render function not defined.
},
在此之前是需要把文件通过import导入进来，不然是找不到相应模块
3、关于组件的数据传递，这个网上很多博客将的比较详细
推荐下
https://www.cnblogs.com/Juphy/p/7089201.html
https://blog.csdn.net/qilanbei/article/details/78061406
这一块儿得自己去实践，看别人写的多好没用，得自己去写一次
关于D3
首先，画图的基础是有一张画布，所以先创建一张画布，画布的宽高要给出具体的值。 创建语句 var width = 500, height = 500; // 宽高的值可以修改 var svg = d3.select("body").append("svg").attr("width", width + 100).attr("height", height + 100); // 具体将画布放在哪儿是由select()函数的参数决定的
其次需要考虑数据 根据你画的图确定你所使用的数据是否要转换，这里的转换的含义可以这么来理解，正常情况穿进去的是值为整数的数组，如果你想画饼状图，就需要根据数组中的值计算出起始角和终止角，这样才有画出饼状图的基础 数据转换好了，接下来就是怎么画，比如饼状图有了起止角度，只需要画弧线，花弧线就用提供的arc()函数；柱状图的组成有长方形、坐标轴，有的还有网格线，这些就需要使用不同的函数绘制好了之后通过svg.append('')这种格式的思想添加到画布上，当然如果还需要添加其他样式、字符串等，依旧可以调用函数来实现 1.选取元素 下面两个函数都可以，只需要传入你要选取元素的名称即可 ，如body，#app d3.select - select an element from the document. d3.selectAll - select multiple elements from the document. 2.数据转换 我目前用过的就是pie和force两种 d3.pie(data) 转换后的每个数组元素就变成了一个pie对象，具有startAngle、endAngle等属性 d3.forceSimulation(data) 转换为force对象后，就具有了force的方法，后续介绍 然后就是画了 1.画圆 svg.selectAll('circle').data(data).enter().append('circle') .attr('cx',function(d){return d.x}) .attr('cy',function(d){return d.y}) .attr('r',20) 2.画线 svg.selectAll('line').data(data).enter().append('line') .attr('stroke',red) .attr('stroke-width',3) 3.画弧 svg.selectAll('g').data(d3.pie(data)).enter().append('g') .attr('transform', 'translate(10,11)') .append('path') .attr('fill',function(d,i){return color(i)}) .attr('d',function(d) return arc(d)) 4.坐标轴 var xScale = d3.scaleinear().domain().range() domain()是定义域，就是你的数据的一个范围，一般横坐标是0~数据的长度 纵坐标是0~数据值最大的 range()是值域，与画布的大小有关，超出的画会不显示 5.网格线 d3.axisBottom(xScale).tickSize(,,).ticks() axisBottom、axistop、axisleft、axisright 坐标轴在的位置 tickSize() 刻度大小 ticks() 自定义刻度的显示方式以及格式化刻度 6.颜色 颜色是用函数自动生成的 let color = d3.scaleOrdinal(d3.schemeCategory10) 这样才可以通过color(i)随机生成，上面的函数只生成了十种颜色 7.添加文字 svg.selectAll('text').data(data).enter().append('text') .attr('x',20) .attr('y',20}) .text(function(d){return d.name})
值得注意的是D3 V4与之前的版本之间的函数写法差异性很大，建议查阅官方API 有很多语言版本，可以自行查阅