d3+svg画图基础应用

d3+svg画图基础应用

1.svg
1.1 简介
SVG，是一种用于描述二维的可缩放矢量图形，基于XML的标记语言，像JPEG和JPG不同，SVG格式提供的是矢量图，这意味着它的图像能够被无限放大而不失真和降低质量，并且可以方便的修改内容。
1.2 常用标签和属性
svg：SVG容器；
defs：SVG允许定义以后需要重复使用的图形元素，建议所有需要再次使用的元素定义在defs元素里面；可以增强SVG内容的易读性和可访问性defs元素中定义的图形元素不会直接呈现，可以在视口的任意地方利用use标签呈现；
use：在SVG文档内取得目标节点，并在别的地方复制它们；
g：用于组合对象；可以通过use引用；
marker：定义了特定的path元素，line元素，polyline元素或者polygon元素上绘制的箭头或者多边标记图形；
path：用于定义图像形状；


Id：用以在别处引用；
M：控制虚拟笔移动到初始位置；
L：标识直线；
fill：填充颜色；
stroke：描边颜色；
markerWidth，markerHeight：代表箭头标签的高亮范围；
refX，refY：箭头图形和直线连接的坐标点；
orient=”auto”设置箭头方向为自动适应线条的方向；
1.3 代码示例


2.d3
2.1简介
D3js是一个可以基于数据来操作文档的JavaScript库。可以帮助你使用HTML，CSS，SVG以及Canvas来展示数据。D3遵循现有的web标准，可以不需要其他任何框架独立运行在现代浏览器中，它结合强大的可视化来驱动DOM操作。

2.2常用属性设置
（1）直接选择并设置属性

（2）选择并动态设置属性

注：hsl()为定义颜色的函数，参数分别为：色相，饱和度，亮度
（3）选择-绑定数据-动态设置属性

（4）Link
d3.js中的link是用来生成一个从source到target的三次贝塞尔曲线，他主要包括linkHorizontal，linkVertical，linkRadial三种。
三者的详细讲解

Source代表起点，target代表终点,link在二者之间画一条贝塞尔曲线

不使用这三种贝塞尔曲线时，可以自己定义曲线



d3其他模块：
d3-array 数组操作
d3-axis坐标轴组件
d3-brush刷取交互
d3-dsv 这个模块提供了一个针对分隔符文件/字符串的解析和格式化工具
d3-color提供各种空间颜色表示，并支持各种空间颜色的转换和操作
d3-zoom视图移动缩放