回顾
• 函数式编程很重要、函数式编程很重要、函数式编程很重要
• 要习惯与把函数作为参数输入给另一个函数
以下函数的定义等价:
• const myFunction = datum => datum.value
• const myFunction = (datum) => { return datum.value }
• const myFunction = function(datum){return datum.value}
• const myFunction = function(d){return d.value}
• const myFunction = d => d.value
为什么使用Path
• path元素是SVG基本形状中最强大的一个，它不仅能创建其他基本形状，还能创建更多其他形状。你可以用path元素绘制矩形(直角矩形 或者圆角矩形)、圆形、椭圆、折线形、多边形，以及一些其他的形 状，例如贝塞尔曲线、2次曲线等曲线。
• path元素的形状是通过属性d来定义的，属性d的值是一个“命令+参数” 的序列
• Path作为SVG提供的标签之一，是实现众多可视化方案的基础
• Path可以做什么?
折线图 地图 主题河流
Path的属性
•d
• fill: 填充颜色
• stroke:描边颜色
• stroke-width:描边宽度
• transform="translate(x,y)": 加了描边后需要平移(x=stroke-width/2, y=stroke-width/2)
‘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():关闭路径
注：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定 位。
