D3中path各指令的含义

svg.append('path').attr({
        id: 'mypath',
        d: 'M50 100Q350 50 350 250Q250 50 50 250'
    })

path 的指令有：

指令 参数 指令说明

M x y 起始点的 x, y 座标(moveto)

L x y 从目前点的座标画直线到指定点的 x, y 座标(lineto)

H x 从目前点的座标画水平直线到指定的 x 轴座标(horizontal lineto)

V y 从目前点的座标画垂直线到指定的 y 轴座标(vertical lineto)

C x1 y1 x2 y2 x y 从目前点的座标画条贝兹曲线到指定点的 x, y 座标：其中 x1, y1 及 x2, y2 為控制点(curveto)

S x2 y2 x y 从目前点的座标画条反射的贝兹曲线到指定点的 x, y 座标：其中 x2, y2 為反射控制点(smooth curveto)

Q x1 y1 x y 从目前点的座标画条二次贝兹曲线到指定点的 x, y 座标：其中 x1, y1 為控制点(quadratic Bézier curve)

T x y 从目前点的座标画条反射二次贝兹曲线到指定点的 x, y 座标：以前一个座标為反射控制点(smooth quadratic Bézier curveto)

A rx ry x-axis-rotation large-arc-flag sweep-flag x y 从目前点的座标画个椭圆形到指定点的 x, y 座标：其中 rx, ry 為椭圆形的 x 轴及 y 轴的半径，x-axis-rotation 是弧线与 x 轴的旋转角度，large-arc-flag 则设定 1 最大角度的弧线或是 0 最小角度的弧线，sweep-flag 设定方向為 1 顺时针方向或 0 逆时针方向(elliptical Arc)

Z 关闭路径，将目前点的座标与第一个点的座标连接起来(closepath)

指令同时也区分大小写，大写表示座标是使用绝对座标，小写则是用相对座标。

 

stlye 属性

属性名称 属性说明

fill 图形内部的填满顏色，类似 css 中的 background-color

fill-opacity 图形内部的不透明度值，类似 css 中的 opacity，但不包含边框喔！

stroke 图形的边框顏色，类似 css 中的 border-color

stroke-width 图形的边框宽度，类似 css 中的 border-width

opacity 图形的不透明度值，类似 css 中的 opacity