Vue+D3 V4 实现模块化

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 有很多语言版本，可以自行查阅