SVG router

svg
SVG 意为可缩放矢量图形（Scalable Vector Graphics） ，是使用 XML 来描述二维图形和绘图程序的语言。
1.SVG基本属性-填充、描边和变换
     fill 定义填充颜色
     stroke 定义边框颜色
    stroke-width 定义边框高度
2.<rect>标签用来创建矩形
    x 起点的X轴坐标
    x 起点的Y轴坐标
    width  矩形的宽度
    heigth 矩形的高度
3.<circle>标签用来创建圆心
 	cx 圆心的X轴的位置
 	cy 圆心的Y轴的位置
 	 R 圆的半径
4.<path> 标签用来创建折线  复杂的路径标签
	d = “”
	M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
	L = lineto(L X,Y) ：画直线到指定的坐标位置(只是直线，直线是没有宽度的，所以你什么也看不到。)
	H = horizontal lineto(H X)：画水平线到指定的X坐标位置
	V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
	C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
	S = smooth curveto(S X2,Y2,ENDX,ENDY)
	Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
	T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
	A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
	Z = closepath()：关闭路径
	M　起点X，起点Y　L（直线）终点X，终点Y　H（水平线）终点X　V（垂直线）终点Y

	<svg width='500' height='400'>
    <rect x="10" y="10" width="200" height="100" style="fill:none; 
    stroke-width:1; stroke: #000"></rect>
    <circle cx="250" cy="200" r="50" style="fill:none; stroke-width:1; stroke:orangered"/>
    <path d="M300,400 L200,100 L300,100 L400,150"
         fill="none" stroke="#000" stroke-width="1" />
	</svg>    

二.数据可视化
	
 d3使用的时候，必须注意版本，版本5以下与版本5中的命令不一样，所以使用时一定要注意版本   	
 	d3的基本语法
(1)d3.select(‘选取的标签’)：选中的是文档里的第一个标签（可以选取id、class名）
(2)d3.selectAll(‘选取的标签’)：选中所有的标签
(3)d3.selectAll(‘选取的标签’).datum(str).text((a,b)=>{ return a}):循环的是整个的标签（a是内容，b是对应的下标）
(4)d3.selectAll(‘选取的标签’).data(arr).text((a,b)=>{return a}):循环的是内容的下标（a是内容，b是对应的下标）
(5)d3.select(‘选取的标签’).text(str).style(‘’,’’):设置样式
三．d3 的折线图
	d3.select(‘选取的标签’).append(‘添加的标签’)：在元素的后面添加；
	d3.select(‘选取的标签’).insert(‘添加的标签’)：在元素的前面添加；
	d3.select(‘选取的标签’).attr(‘要修饰的属性’，’属性值’)：在元素的后面添加
折线图实现

var input = document.getElementsByTagName('input')[0];
input.oninput = function () {
   
    var arr = input.value.split(",");//从arr的'，'开始分割字符串
    line(arr);
};
function line(arr) {
   
    d3.select('svg').remove();//没输入就会新添加一个svg  所以删除一下svg
    var arr=arr;
    var width=500;
    var height=400;
    var marginLeft=30;
    var marginTop=30;
    var g_width=width-marginLeft*2;
    var g_height=height-marginTop*2;

    //1.创建一个svg；
    d3.select('div')
        .append('svg')
        .attr('width',width)
        .attr('height',height);
    //2.创建一个 g
    d3.select('svg')
        .append('g')
        .attr('width',g_width)
        .attr('height',g_height)
        .attr('transform',`translate(${
   marginTop},${
   marginTop})`);
    //5.放大坐标
    var sclaceX = d3.scaleLinear()//创建一个线性的坐标
        .domain([0,arr.length])  // 原来的值
        .range([0,g_width]); //  改变以后的

    var sclaceY = d3.scaleLinear()//创建一个线性的坐标
        .domain([0,g_height])//原来的值
                .range([g_height,0]);//改变以后的
    //4.创建坐标点
    var line = d3.line()
        .x((d,i)=>sclaceX(i))//i是下标
        .y((d,i)=>sclaceY(d));//d是y轴的点
    //3.创建path
    d3.select('g')
        .append('path')
        .attr('fill','none')
        .attr('stroke','red')
        .attr('d',line(arr));

    //6.创建y x轴

    var x = d3.axisBottom()
        .scale(sclaceX);//按照之前的放大比例
    d3.select('g')
        .append('g')
        .call(x)
        .attr('transform',`translate(0,${
   g_height})`);

    var y = d3.axisLeft()
        .scale(sclaceY);
    d3.select('g')
        .append('g')
        .call(y);

}

Vu：
 1.官网地址[link](https://cn.vuejs.org/)
2.下载 Vue.js :npm install vue --save
3. 引入<script src="./node_modules/vue/dist/vue.js"></script>
4. 实例化

new Vue({
   
 el:"#app", // element queryselect E ID class 
data:{
    msg:123 } }) 
html {
   {
   msg}} // 插值表达式

5.指令v-开头的
 v-开头的:
v-html:改变标签内容 可以识别标签 一般不建议使用  安全问题 web安全
v-text:改变标签内容 不可识别标签 原样输出 建议使用这个就行
v-once:绑定数据， 只能绑定一次，修改的时候不会发生改变
v-bind:  :绑定属性 简写  “：”
v-show:控制元素显示隐藏 display：none block
v-on ：简写 “@”（添加事件）
详情：
@click.stop 阻止事件冒泡
@click.prevent 阻止默认事件
@click.self 只能由标签自身触发
@click.once 程序运行期间只能执行一次
@click="btn6(myArg)" 事件传参, 如果是字符串, 请用单引号

注意: 如果传参, 再使用(), 如果不传, 可以省略()不写, 如果传实践对象, 要使用$event

6.v-if ---- v-else

<h1 v-if="!flag">{
   {
   msg}}</h1>
<!--if作为判断条件，如果if的flag值为true，那么这个条件成立，else的条件不显示-->
<h1 v-else>{
   {
   msg1}}</h1>
<!--else作为if的执行条件，如果if条件不成立，那么else开始执行，（！flag  也就是flag的值是false的时候就是显示else）-->

注：v-if和show的区别
1.v-show默认情况下都会加载dom
2.V-if如果条件是false的时候页面不渲染
V-if和v-show什么情况下使用
1.页面需要频繁切换的时候
2.页面渲染次数少，或者只需要一次切换的情况下

	7.v-for
数组：
<li v-for="(item,index) in cars" v-if="a<2">{
   {
   item}}---{
   {
   index}}</li>
 <!--item表示的遍历的每一项，a表示的是索引值（也就是下标）-->
 <!--可以加v-if做判断（取模，取余）-->

对象：
<h3 v-for="(item,index) in obj">{
   {
   item}}---{
   {
   index