How to use the d3-shape.symbol function in d3-shape

customSymbol = {
    draw(context: CanvasPathMethods, size: number): void {
        // draw custom symbol using canvas path methods
    }
};

// Symbol() create Symbol Generator ===================================================

let canvasSymbol: d3Shape.Symbol;

let svgSymbol: d3Shape.Symbol;

canvasSymbol = d3Shape.symbol();

svgSymbol = d3Shape.symbol();

// Configure Symbol Generator =========================================================

// context() --------------------------------------------------------------------------

if (context !== null) {
    canvasSymbol = canvasSymbol.context(context); // draw to canvas
}
context = canvasSymbol.context();

svgSymbol = svgSymbol.context(null); // use as path string generator for SVG

// size() ----------------------------------------------------------------------------

canvasSymbol = canvasSymbol.size(30);

const getPathFn = (props) => {
      const { datum, startAngle, endAngle, r1, r2 } = props;
      const pathFunction = d3Shape
        .arc()
        .innerRadius(r1)
        .outerRadius(r2)
        .startAngle(endAngle)
        .endAngle(startAngle)
        .cornerRadius(0);
      const path = pathFunction();
      const coords = path.split(/[A-Z]/).slice(1);
      // add a star symbol to the end of each bar
      const star = d3Shape
        .symbol()
        .size(datum.y * 20)
        .type(d3Shape.symbolStar)();
      const movesStar = star.match(/[A-Z]/g);
      const coordsStar = star.split(/[A-Z]/).slice(1);
      const [x0, y0] = coords[0].split(",").map(Number);
      const [x1, y1] = coords[1]
        .split(",")
        .slice(coords[1].split(",").length - 2)
        .map(Number);
      const [xOrigin, yOrigin] = [(x0 + x1) / 2, (y0 + y1) / 2];
      const adjustedCoordsStar = coordsStar.map((coord) => {
        if (coord.length === 0) {
          return "";
        }
        const [x, y] = coord.split(",").map(Number);

.attr("y", wasmResult => xPerCase.bandwidth() / 2 + 2.5);

        barsMerged.select("text")
            .transition()
            .duration(TRANSITION_DURATION)
            .attr("y", wasmResult => xPerCase.bandwidth() / 2 + 2.5)
            .text(wasmResult => percentFormat(wasmResult.percentage));

        const emcc = barsMerged.selectAll("path.emcc")
            .data(wasmResult => wasmResult.emccPercentage ? [wasmResult] : []);
        emcc.exit().remove();

        const emccEnter = emcc.enter()
            .append("path")
            .attr("class", "emcc")
            .attr("d", d3Shape.symbol().size(38).type(d3Shape.symbolCross)())
            .attr("fill", "black")
            .attr("transform", "translate(" +  xPerCase.bandwidth() / 2 + "," + innerHeight + "), rotate(45)");

        emcc.merge(emccEnter)
            .transition()
            .duration(TRANSITION_DURATION)
            .attr("transform", wasmResult => "translate(" +  xPerCase.bandwidth() / 2 + "," + y(wasmResult.emccPercentage) + "), rotate(45)");

        updateLegend();

        container.select("line.hundred-percent")
            .transition()
            .duration(TRANSITION_DURATION)
            .attr("y1", y(1) + 0.75)
            .attr("y2", y(1) + 0.75);
    }

function xw(item)    { return (item.x || 0) + (item.width || 0); }
function yh(item)    { return (item.y || 0) + (item.height || 0); }
function cr(item)    { return item.cornerRadius || 0; }
function pa(item)    { return item.padAngle || 0; }
function def(item)   { return !(item.defined === false); }
function size(item)  { return item.size == null ? 64 : item.size; }
function type(item) { return pathSymbols(item.shape || 'circle'); }

var arcShape    = d3_arc().cornerRadius(cr).padAngle(pa),
    areavShape  = d3_area().x(x).y1(y).y0(yh).defined(def),
    areahShape  = d3_area().y(y).x1(x).x0(xw).defined(def),
    lineShape   = d3_line().x(x).y(y).defined(def),
    trailShape  = pathTrail().x(x).y(y).defined(def).size(wh),
    rectShape   = pathRectangle().x(x).y(y).width(w).height(h).cornerRadius(cr),
    rectShapeGL = pathRectangle().x(0).y(0).width(w).height(h).cornerRadius(cr),
    symbolShape = d3_symbol().type(type).size(size);

export function arc(context, item) {
  if (!context || context.arc) {
    return arcShape.context(context)(item);
  }
  return geometryForPath(context, arcShape.context(null)(item), 0.1);
}

export function area(context, items) {
  var item = items[0],
      interp = item.interpolate || 'linear',
      s = (interp === 'trail' ? trailShape
        : (item.orient === 'horizontal' ? areahShape : areavShape)
            .curve(pathCurves(interp, item.orient, item.tension))
      )
  if (!context || context.arc) {

export const areavShape = d3Area()
	.y1(y)
	.y0(y2)
	.x(x)
	.defined(def)

export const lineShape = d3Lines()
	.x(x)
	.y(y)
	.defined(def)

export const symbolWithArea = d3Symbol()
	.type(rendererByArea)
	.size(symbolSize)

export const symbolWithWidth = d3Symbol()
	.type(rendererByWidth)
	.size(symbolWidth)

(d: Datum): string =>
          d3Symbol()
            .type(this.symbol(d).symbol)
            .size(this.size(d))(),
      )

.add('Alternative handle', () => {
    const div = document.createElement('div');

    const data1 = [0, 0.005, 0.01, 0.015, 0.02, 0.025];

    const slider = sliderBottom()
      .min(min(data1))
      .max(max(data1))
      .width(300)
      .tickFormat(format('.2%'))
      .ticks(5)
      .default(0.015)
      .handle(
        symbol()
          .type(symbolCircle)
          .size(200)()
      );

    const g = select(div)
      .append('svg')
      .attr('width', 500)
      .attr('height', 100)
      .append('g')
      .attr('transform', 'translate(30,30)');

    g.call(slider);

    return div;
  })
  .add('Transition', () => {

function buildSvgSymbol(size = CONST.DEFAULT_NODE_SIZE, symbolTypeDesc = CONST.SYMBOLS.CIRCLE) {
    return d3Symbol()
        .size(() => size)
        .type(() => _convertTypeToD3Symbol(symbolTypeDesc))();
}

_draw (layer, series) {
        if (!this.canDraw(layer, series)) return;
        var serie = series[0],
            data = serie.data(),
            scope = this.$scope,
            merge = layer.transition('update'),
            x = this.scaled(this.accessor(scope.x || 'x'), scope.scalex || 'x'),
            y = this.scaled(this.accessor(scope.y || 'y'), scope.scaley || 'y'),
            size = this.accessor(scope.size),
            fill = this.color('fill', serie),
            group = layer.group(this);

        var sym = symbol().size(size),
            points = group.selectAll('path.points').data(data);

        points
            .enter()
                .append('path')
                .attr('class', 'points')
                .attr('transform', layer.translate(x, y))
                .attr('fill', fill)
                .attr('fill-opacity', 0)
            .merge(points)
                .transition(merge)
                .attr('transform', layer.translate(x, y))
                .attr('fill', fill)
                .attr('fill-opacity', scope.fillOpacity)
                .attr('d', sym);