d3/docs/d3-shape/link.md

Links

Examples · The link shape generates a smooth cubic Bézier curve from a source point to a target point. The tangents of the curve at the start and end are either vertical or horizontal. See also radial links.

link(curve)

Source · Returns a new link generator using the specified curve. For example, to visualize links in a tree diagram rooted on the top edge of the display, you might say:

const link = d3.link(d3.curveBumpY)
    .x((d) => d.x)
    .y((d) => d.y);

linkVertical()

Source · Shorthand for link with curveBumpY; suitable for visualizing links in a tree diagram rooted on the top edge of the display. Equivalent to:

const link = d3.link(d3.curveBumpY);

linkHorizontal()

Source · Shorthand for link with curveBumpX; suitable for visualizing links in a tree diagram rooted on the left edge of the display. Equivalent to:

const link = d3.link(d3.curveBumpX);

link(...arguments)

Source · Generates a link for the given arguments. The arguments are arbitrary; they are propagated to the link generator’s accessor functions along with the this object. With the default settings, an object with source and target properties is expected.

link({source: [100, 100], target: [300, 300]}) // "M100,100C200,100,200,300,300,300"

link.source(source)

Source · If source is specified, sets the source accessor to the specified function and returns this link generator.

const link = d3.linkHorizontal().source((d) => d[0]);

If source is not specified, returns the current source accessor.

link.source() // (d) => d[0]

The source accessor defaults to:

function source(d) {
  return d.source;
}

link.target(target)

Source · If target is specified, sets the target accessor to the specified function and returns this link generator.

const link = d3.linkHorizontal().target((d) => d[1]);

If target is not specified, returns the current target accessor.

link.target() // (d) => d[1]

The target accessor defaults to:

function target(d) {
  return d.target;
}

link.x(x)

Source · If x is specified, sets the x-accessor to the specified function or number and returns this link generator.

const link = d3.linkHorizontal().x((d) => x(d.x));

If x is not specified, returns the current x accessor.

link.x() // (d) => x(d.x)

The x accessor defaults to:

function x(d) {
  return d[0];
}

link.y(y)

Source · If y is specified, sets the y-accessor to the specified function or number and returns this link generator.

const link = d3.linkHorizontal().y((d) => y(d.y));

If y is not specified, returns the current y accessor.

link.y() // (d) => y(d.y)

The y accessor defaults to:

function y(d) {
  return d[1];
}

link.context(context)

Source · If context is specified, sets the context and returns this link generator.

const context = canvas.getContext("2d");
const link = d3.link().context(context);

If context is not specified, returns the current context.

link.context() // context

The context defaults to null. If the context is not null, then the generated link is rendered to this context as a sequence of path method calls. Otherwise, a path data string representing the generated link is returned. See also d3-path.

link.digits(digits)

Source · If digits is specified, sets the maximum number of digits after the decimal separator and returns this link generator.

const link = d3.link().digits(3);

If digits is not specified, returns the current maximum fraction digits, which defaults to 3.

link.digits() // 3

This option only applies when the associated context is null, as when this link generator is used to produce path data.