Path

什么是Path

• SVG基本图形 可以用于绘制矩形圆形椭圆折线...
• path的形状是通过属性d来定义的，属性d的值是一个“命令+参数”的序列

属性

• d
• fill 填充颜色
• stroke 描边颜色
• stroke-width 描边宽度
• transform = ‘translate(x, y)‘加了描边后需要平移

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 curveto(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() 关闭路径

大写表示绝对位置，小写表示相对位置

D3.js Path 生成器

• d3.line().x().y()用于折线图
• d3.geoPath().projection()用于地图
• d3.area()用于主题河流
• d3.arc().innerRadius().outerRadius()用于饼图
• d3.lineRadial().angle().radius()极坐标系版本的d3.line()