How to use d3-path - 10 common examples

renderString (s) {
    let strokeLength = 10;
    this.bounds = {minX: 0, maxX: 0, minY: 0, maxY: 0};
    const turnAngle = this.turnAngle;
    let angle = this.startAngle;
    // path saves all the points and line strokes
    let path = d3path.path();
    let pos = new Vector2(0, 0);
    path.moveTo(pos.x, pos.y);
    // start with empty stack
    let stack = [];
    for (let i = 0; i < s.length; i++) {
      if (this.drawSymbols.includes(s[i])) {
        angle = (angle + 2 * Math.PI) % (2 * Math.PI);
        let dir = Vector2.fromAngle(angle);
        dir.y = -dir.y; // SVG's y increases down
        pos.add(dir.scale(strokeLength));
        path.lineTo(pos.x, pos.y);
        this.updateBounds(pos);
      } else {
        switch (s[i]) {
          case '+': { // turn left
            angle -= turnAngle;

function createPath (fn) {
  var path = d3.path();
  if (typeof fn === 'function') fn(path);
  path.lineTo = wrap(path.lineTo);
  path.quadraticCurveTo = wrap(path.quadraticCurveTo);
  path.bezierCurveTo = wrap(path.bezierCurveTo);
  return path;

  // Patch a bug in d3-path that doesn't handle
  // lineTo and so on without an initial moveTo
  function wrap (fn) {
    return function () {
      var args = Array.prototype.slice.call(arguments);
      if (path._x1 == null && path._y1 == null) {
        path.moveTo(args[0], args[1]);
      }
      return fn.apply(path, args);
    };

conicConformalFrance.getCompositionBorders = function() {
    var context = path();
    this.drawCompositionBorders(context);
    return context.toString();
  };

var cosA = dx / length;
        var sinA = dy / length;
    }
    x2 = x1 + (length - shortening - arrowHeadLength - margin) * cosA;
    y2 = y1 + (length - shortening - arrowHeadLength - margin) * sinA;

    if (attributes.URL || attributes.tooltip) {
        var a = edge.selectWithoutDataPropagation("g").selectWithoutDataPropagation("a");
        var line = a.selectWithoutDataPropagation("path");
        var arrowHead = a.selectWithoutDataPropagation("polygon");
    } else {
        var line = edge.selectWithoutDataPropagation("path");
        var arrowHead = edge.selectWithoutDataPropagation("polygon");
    }

    var path1 = d3_path();
    path1.moveTo(x1, y1);
    path1.lineTo(x2, y2);

    line
        .attr("d", path1);

    x2 = x1 + (length - shortening - arrowHeadLength) * cosA;
    y2 = y1 + (length - shortening - arrowHeadLength) * sinA;
    for (var i = 0; i < arrowHeadPoints.length; i++) {
        var point = arrowHeadPoints[i];
        arrowHeadPoints[i] = rotate(point[0], point[1], cosA, sinA);
    }
    for (var i = 0; i < arrowHeadPoints.length; i++) {
        var point = arrowHeadPoints[i];
        arrowHeadPoints[i] = [x2 + point[0], y2 + point[1]];
    }

points.map(({hour, speed}) => {
                let x = xScale(hour);
                let key = hour;
                let b = bofort(speed);
                let strokeWidth = size(b);
                let curve = d3Path();
                curve.moveTo(x, y0 - l / 2);
                curve.lineTo(x + l / 3, y0);
                curve.lineTo(x, y0 + l / 2);
                let d = curve.toString();
                return path({
                    key,
                    stroke: 'white',
                    strokeWidth: strokeWidth,
                    fill: 'transparent',
                    d
                });
            })
        );

function getPath(line1, line2) {
	const ctx = d3Path();
	ctx.moveTo(line1.x1, line1.y1);
	ctx.lineTo(line1.x2, line1.y2);
	ctx.lineTo(line1.x2, line2.y2);
	ctx.lineTo(line1.x1, line2.y1);

	ctx.closePath();
	return ctx.toString();
}

{pairsOfLines.map(([line1, line2], idx) => {
					const ctx = d3Path();
					ctx.moveTo(line1.x1, line1.y1);
					ctx.lineTo(line1.x2, line1.y2);
					ctx.lineTo(line2.x2, line2.y2);
					ctx.closePath();
					return (

export function FanchartMarriage(props: FanchartMarriageProps) {
   if (!props.layout.parentsMarriage) {
      return null;
   }

   let m = props.layout.minAngle - Math.PI / 2;
   let M = props.layout.maxAngle - Math.PI / 2;

   const td = path();
   td.arc(0, 0, props.layout.maxRadius + props.gapHeight / 2, m, M);

   return (

function link() {
    var buffer, argv = slice.call(arguments), s = source.apply(this, argv), t = target.apply(this, argv);
    if (!context) context = buffer = path();
    curve(context, +x.apply(this, (argv[0] = s, argv)), +y.apply(this, argv), +x.apply(this, (argv[0] = t, argv)), +y.apply(this, argv));
    if (buffer) return context = null, buffer + "" || null;
  }

function drawCustom(context: Path, size: number) {
			if (!context) {
				context = path()
			}
			pathRender(context, parsed, 0, 0, size)
			return context
		}