Logo for jsDocs.io

@types/d3-path

  • Version 3.1.0
  • Published
  • 8.3 kB
  • No dependencies
  • MIT license

Install

npm i @types/d3-path
yarn add @types/d3-path
pnpm add @types/d3-path

Overview

TypeScript definitions for d3-path

Index

Functions

Interfaces

Functions

function path

path: () => Path;

  • Construct a D3 Path serializer

function pathRound

pathRound: (digits?: number) => Path;

  • Like path, except limits the digits after the decimal to the specified number of digits. Useful for reducing the size of generated SVG path data.

Interfaces

interface Path

interface Path {}

  • A D3 path serializer implementing CanvasPathMethods

method arc

arc: (
    x: number,
    y: number,
    radius: number,
    startAngle: number,
    endAngle: number,
    anticlockwise?: boolean
) => void;

  • Draws a circular arc segment with the specified center ⟨x, y⟩, radius, startAngle and endAngle. If anticlockwise is true, the arc is drawn in the anticlockwise direction; otherwise, it is drawn in the clockwise direction. If the current point is not equal to the starting point of the arc, a straight line is drawn from the current point to the start of the arc. Equivalent to context.arc and uses SVG’s elliptical arc curve commands.

    Parameter x

    x-Coordinate of the center point of the arc segment

    Parameter y

    y-Coordinate of the center point of the arc segment

    Parameter startAngle

    Start angle of arc segment

    Parameter endAngle

    End angle of arc segment

    Parameter anticlockwise

    Flag indicating directionality (true = anti-clockwise, false = clockwise)

method arcTo

arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void;

  • Draws a circular arc segment with the specified radius that starts tangent to the line between the current point and the specified point ⟨x1, y1⟩ and ends tangent to the line between the specified points ⟨x1, y1⟩ and ⟨x2, y2⟩. If the first tangent point is not equal to the current point, a straight line is drawn between the current point and the first tangent point. Equivalent to context.arcTo and uses SVG’s elliptical arc curve commands.

    Parameter x1

    x-Coordinate of the first tangent point

    Parameter y1

    y-Coordinate of the first tangent point

    Parameter x2

    x-Coordinate of the second tangent point

    Parameter y2

    y-Coordinate of the second tangent point

    Parameter r

    Radius of the arc segment

method bezierCurveTo

bezierCurveTo: (
    cpx1: number,
    cpy1: number,
    cpx2: number,
    cpy2: number,
    x: number,
    y: number
) => void;

  • Draws a cubic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control points ⟨cpx1, cpy1⟩ and ⟨cpx2, cpy2⟩. Equivalent to context.bezierCurveTo and SVG’s cubic Bézier curve commands.

    Parameter cpx1

    x-Coordinate of the first control point for the Bézier curve

    Parameter cpy1

    y-Coordinate of the first control point for the Bézier curve

    Parameter cpx2

    x-Coordinate of the second control point for the Bézier curve

    Parameter cpy2

    y-Coordinate of the second control point for the Bézier curve

    Parameter x

    x-Coordinate of point to draw the curve to

    Parameter y

    y-Coordinate of point to draw the curve to

method closePath

closePath: () => void;

  • Ends the current subpath and causes an automatic straight line to be drawn from the current point to the initial point of the current subpath. Equivalent to context.closePath and SVG’s “closepath” command.

method lineTo

lineTo: (x: number, y: number) => void;

  • Draws a straight line from the current point to the specified point ⟨x, y⟩. Equivalent to context.lineTo and SVG’s “lineto” command.

    Parameter x

    x-Coordinate of point to draw the line to

    Parameter y

    y-Coordinate of point to draw the line to

method moveTo

moveTo: (x: number, y: number) => void;

  • Move to the specified point ⟨x, y⟩. Equivalent to context.moveTo and SVG’s “moveto” command.

    Parameter x

    x-Coordinate of point to move to

    Parameter y

    y-Coordinate of point to move to

method quadraticCurveTo

quadraticCurveTo: (cpx: number, cpy: number, x: number, y: number) => void;

  • Draws a quadratic Bézier segment from the current point to the specified point ⟨x, y⟩, with the specified control point ⟨cpx, cpy⟩. Equivalent to context.quadraticCurveTo and SVG’s quadratic Bézier curve commands.

    Parameter cpx

    x-Coordinate of the control point for the quadratic Bézier curve

    Parameter cpy

    y-Coordinate of the control point for the quadratic Bézier curve

    Parameter x

    x-Coordinate of point to draw the curve to

    Parameter y

    y-Coordinate of point to draw the curve to

method rect

rect: (x: number, y: number, w: number, h: number) => void;

  • Creates a new subpath containing just the four points ⟨x, y⟩, ⟨x + w, y⟩, ⟨x + w, y + h⟩, ⟨x, y + h⟩, with those four points connected by straight lines, and then marks the subpath as closed. Equivalent to context.rect and uses SVG’s “lineto” commands.

    Parameter x

    x-Coordinate of starting point for drawing the rectangle

    Parameter y

    y-Coordinate of starting point for drawing the rectangle

    Parameter w

    Width of rectangle

    Parameter h

    Height of rectangle

method toString

toString: () => string;

  • Returns the string representation of this path according to SVG’s path data specification.

Package Files (1)

Dependencies (0)

No dependencies.

Dev Dependencies (0)

No dev dependencies.

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/d3-path.

  • Markdown
    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/d3-path)
  • HTML
    <a href="https://www.jsdocs.io/package/@types/d3-path"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>