createSvgArcTicksPath function

Creates the d of evenly spaced graduations along an arc, around the center of an element in any group: count intervals give count + 1 ticks. Make one path for the major ticks, one for the minor ones.

import { createSvgArcTicksPath } from 'utils';

Signature

export function createSvgArcTicksPath(target: SVGGraphicsElement, arc: SvgArc, count: number, length: number): string

Parameters

Name	Description
target	The element in whose coordinates the path is written, such as the <path> that receives it.
arc	The center element, the radius where the ticks start, the start angle and the opening.
count	The number of intervals.
length	The length of each tick, towards the center; negative to go outwards.

Returns

The path data, one M … L … per tick.

Errors

• Throws TypeError: When an element is not rendered.

Example

const arc = { center: hub, radius: 40, startAngle: -135, sweepAngle: 270 };
majorTicks.setAttribute('d', createSvgArcTicksPath(majorTicks, arc, 6, 8)); // 7 long ticks
minorTicks.setAttribute('d', createSvgArcTicksPath(minorTicks, arc, 30, 4)); // 31 short ones

Tests

Line coverage: 100 %.

• ✅ draws count + 1 ticks towards the center

Source

src/svg-shape/create-svg-arc-ticks-path.ts (on GitHub)

Uses

• getSvgAnchorPointIn: Finds an anchor of an element as seen on screen, in the coordinates of another element, whatever groups lie between: the center of a hub for the setRotate of a needle drawn in another group.
• SvgArc: An arc around the center of an element, for createSvgArcPath and its siblings (0° up, clockwise).

Files it needs

src/svg-shape/create-svg-arc-ticks-path.ts imports, directly or not:

• src/math/round-to-fraction-digits.ts
• src/svg-shape/internal/format-coordinate.ts
• src/svg-shape/internal/format-point.ts
• src/svg-shape/internal/polar-to-cartesian.ts
• src/svg-shape/svg-arc.ts
• src/svg-transform/anchor.ts
• src/svg-transform/get-svg-anchor-point-in.ts
• src/svg-transform/get-svg-anchor-point.ts
• src/svg-transform/internal/get-anchor-point.ts
• src/svg-transform/internal/get-screen-matrix.ts

Source code

import { getSvgAnchorPointIn } from '../svg-transform';
import { formatPoint, polarToCartesian } from './internal';
import type { SvgArc } from './svg-arc';

/**
 * Creates the `d` of evenly spaced graduations along an arc, around the center of an element in any group:
 * `count` intervals give `count + 1` ticks. Make one path for the major ticks, one for the minor ones.
 *
 * @param target - The element in whose coordinates the path is written, such as the `<path>` that receives it.
 * @param arc - The center element, the radius where the ticks start, the start angle and the opening.
 * @param count - The number of intervals.
 * @param length - The length of each tick, towards the center; negative to go outwards.
 * @returns The path data, one `M … L …` per tick.
 * @throws {TypeError} When an element is not rendered.
 * @example
 * const arc = { center: hub, radius: 40, startAngle: -135, sweepAngle: 270 };
 * majorTicks.setAttribute('d', createSvgArcTicksPath(majorTicks, arc, 6, 8)); // 7 long ticks
 * minorTicks.setAttribute('d', createSvgArcTicksPath(minorTicks, arc, 30, 4)); // 31 short ones
 */
export function createSvgArcTicksPath(target: SVGGraphicsElement, arc: SvgArc, count: number, length: number): string {
  const center = getSvgAnchorPointIn(arc.center, 'center', target);
  let d = '';
  for (let index = 0; index <= count; index++) {
    const angle = arc.startAngle + (arc.sweepAngle * index) / count;
    const start = polarToCartesian(center, arc.radius, angle);
    const end = polarToCartesian(center, arc.radius - length, angle);
    d += `${index === 0 ? '' : ' '}M ${formatPoint(start)} L ${formatPoint(end)}`;
  }
  return d;
}

Test file

import { createSvgArcTicksPath } from './create-svg-arc-ticks-path';
import { renderSvg } from './testing';

describe(createSvgArcTicksPath, () => {
  it('draws count + 1 ticks towards the center', () => {
    const byId = renderSvg('<circle id="hub" cx="50" cy="50" r="5" /><path id="ticks" />');
    expect(
      createSvgArcTicksPath(
        byId('ticks'),
        { center: byId('hub'), radius: 40, startAngle: -90, sweepAngle: 180 },
        2,
        10,
      ),
    ).toBe('M 10 50 L 20 50 M 50 10 L 50 20 M 90 50 L 80 50');
  });
});

Keywords: create, svg, arc, ticks, path, svg shapes, function