D3js-给你的想象力插上翅膀
d3.js
库。这个库的全称也被称为Data-Driven Document，顾名思义，基于数据驱动文档，这一概念和Vue的设计思想很类似。
d3.js
下面统称为D3；一直以来是神一般的库的存在；尽管已经有许多优秀的库例如百度的
echarts
等；但是D3与其他的库相比在于，提供了
无限定制的能力
，让你的想象力尽情的发挥；在交互性上做的同样优秀。
~~感受一波，D3.js的魅力
D3的需要的入门知识：
-
SVG -
css -
JavaScript
scale vector graphics (SVG)学习
图片必须在 svg标签内svg指定高度和宽度，也可以使用百分比；继承父元素宽度 svg中可以绘制多个图片
矩形
rect圆形
circle椭圆
ellipse线
line折线
polyline多边形
polygon路径
path
快速生成一个圆
使用
circle标签表示生成圆形cx|cy圆心的位置，不指定则为0,0stroke外圆边框颜色及厚度
<svg width="400" height="400"><circle cx="200" cy="200" r="100" stroke="black" stroke-width="2" fill="red" /></svg>
快速生成一个矩形
width 矩形长
height 矩形宽
stroke 矩形边框
stroke-width 矩形边框宽度
style 指定矩形样式
<svg width="400" height="400"><rect width="100" height="100" stroke="black" stroke-width="2" style="fill: red" /></svg>
快速生成一个椭圆
rx 定义水平半径
ry 定义垂直半径
<svg width="400" height="400"><ellipsecx="150"cy="100"rx="100"ry="50"stroke="black"stroke-width="2"style="fill: red"/></svg>
快速生成一个线条
x1 和x2 x轴的开始和结束
y1和y2 y轴的开始和结束
<svg width="400" height="400"><linex1="150"y1="100"x2="100"y2="50"stroke="black"stroke-width="2" /></svg>
快速生成一个多边形
定义了3个角的位置，将会生成一个三角形
points 定义了每个角的坐标轴位置
<svg width="400" height="400"><polygonpoints="220,100 300,210 170,250"style="fill:#cccccc;stroke:#000000;stroke-width:1"/></svg>
快速生成一个折线图
-
points同样定义了每个折点的坐标 -
fill 这个 填充区域 还有点迷惑
<svg width="400" height="400"><polylinepoints="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/></svg>
快速生成一个路径图
从250，150出发，到150,350；再到350,350；最后回到原点，生成了一个三角形。
推荐使用SVG编辑器来编辑路径图
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M250 150 L150 350 L350 350 Z" /></svg>
参考
SVG
d3js
D3学习之路-知乎
------ 本文结束 感谢阅读 ------