d3版本 v5
<line x1="10" y1="10" x2="10" y2="100" style="stroke: #f00; stroke-width: 5px;"></line>
function renderLine(svg, x1, y1, x2, y2) {
svg.append("line")
.attr("x1", x1)
.attr("y1", y1)
.attr("x2", x2)
.attr("y2", y2)
.attr("stroke-width", 1)
.attr("stroke", "#333")
}
- M = moveto：路径的开始处，M 80,80
- L = lineto：直线，L 150,150
- H = horizontal lineto：绘制水平线命令 —— ，H 90，相当于从 （30，30）画一条直线到 （90，30）
- V = vertical lineto：绘制垂直线段命令 | ，V 90，相当于从 （30，30）画一条直线到 （30，90）
- C = curveto：创建三次贝塞尔曲线命令，需要设置三组坐标参数；C x1 y1, x2 y2, x y
- S = smooth curveto：简化的贝塞尔曲线，S x2 y2 x y，一般跟在 C 命令或者 S 命令后
- Q = quadratic Bézier curve：Q指令可以用来绘制一条二次贝塞尔曲线，Q x1 y1, x y
- T = smooth quadratic Bézier curveto：Q命令的简写命令，T x y,一般跟在 Q 命令或者 T 命令后
- A = elliptical Arc：弧形命令
- Z = closepath：闭合
<path d="M100,100
C80,120 130,130 120,100
C120,100 90,60 80,100
C75,120 100,160 140,100
"></path>
let pathArr = [[50, 100], [60, 80], [70, [100]]]
let pathObj = d3.line()
pathObj.curve(d3[type][fn](n)) // 例如：d3.curveCardinal.tension(0.5)
- d3.curveBasis - 三次 basis 曲线.
- d3.curveBasisClosed - 闭合的三次 basis 曲线.
- d3.curveBasisOpen - 三次 basis 曲线.
- d3.curveBundle - 可设置张力的三次 basis 曲线.
- bundle.beta - 设置三次 basis 曲线的张力 beta.
- d3.curveCardinal - 三次 cardinal 曲线.
- d3.curveCardinalClosed - 闭合的三次 cardinal 曲线.
- d3.curveCardinalOpen - 三次 cardinal 曲线. cardinal.tension - 设置三次 cardinal 曲线的张力系数.
- d3.curveCatmullRom - 三次 Catmull–Rom 曲线.
- d3.curveCatmullRomClosed - 三次 Catmull–Rom 曲线.
- d3.curveCatmullRomOpen - 三次 Catmull–Rom 曲线. catmullRom.alpha - 设置三次 Catmull–Rom 曲线的 alpha 参数.
- d3.curveLinear - 折线.
- d3.curveLinearClosed - 闭合的折线.
- d3.curveMonotoneX - 保持 x 单调性的三次曲线.
- d3.curveMonotoneY - 保持 y 单调性的三次曲线.
- d3.curveNatural - 自然三次样条曲线.
- d3.curveStep - 分段常数函数.
- d3.curveStepAfter - 分段常数函数.
- d3.curveStepBefore - 分段常数函数.
- curve.areaStart - 开始一个新的区域段.
- curve.areaEnd - 结束当前的区域段.
- curve.lineStart - 开始一个新的线段.
- curve.lineEnd - 结束当前的线段end the current line segment.
- curve.point - 为当前的线段中添加一个点.
function renderPath(svg, arr, type, fn, n) {
let pathObj = d3.line()
if (fn) {
pathObj.curve(d3[type][fn](n))
} else {
pathObj.curve(d3[type]);
}
svg.selectAll("path").remove();
svg.append("path")
.attr("d", pathObj(arr))
.attr("stroke-width", 1)
.attr("stroke", "#333")
.attr("fill", "none")
}