d3-force-boundary

# forceBoundary(x0, y0, x1, x1) <>

Creates a new positioning force that tries to keep elements inside a defined boundary defined by x0,y0 and x1,y1. This is useful when you want to guarantee that all nodes remain visible inside the visualization.

# boundary.strength([strength]) <>

If strength is specified, sets the strength accessor to the specified number or function, re-evaluates the strength accessor for each node, and returns this force. The strength determines how much to increment the node’s x- and y-velocity. For example, a value of 0.1 indicates that the node should move a tenth of the way from its current position to the closest point on the circle with each application. Higher values moves nodes more quickly to the target position, often at the expense of other forces or constraints. A value outside the range [0,1] is not recommended.

If strength is not specified, returns the current strength accessor, which defaults to:

function strength() {
  return 0.1;
}

The strength accessor is invoked for each node in the simulation, being passed the node and its zero-based index. The resulting number is then stored internally, such that the strength of each node is only recomputed when the force is initialized or when this method is called with a new strength, and not on every application of the force.

# boundary.x0([x0]) <>

If x0 is specified, sets the starting x-coordinate of the boundary as an accessor (can be a function). If x0 is not specified, returns the current starting x-coordinate of the boundary.

# boundary.y0([y0]) <>

If y0 is specified, sets the starting y-coordinate of the boundary as an accessor (can be a function). If y0 is not specified, returns the current starting y-coordinate of the boundary.

# boundary.x1([x1]) <>

If x1 is specified, sets the ending x-coordinate of the boundary as an accessor (can be a function). If x is not specified, returns the current ending x-coordinate of the boundary.

# boundary.y1([y1]) <>

If y1 is specified, sets the ending y-coordinate of the boundary as an accessor (can be a function). If y1 is not specified, returns the current ending y-coordinate of the boundary.

# boundary.border([border]) <>

If border is specified, the force would work only at a border distance from the boundary. If border is not specified, returns the current border that defaults to the middle point of the border. Setting a border is useful when you only want to apply the force on the nodes that are reaching the boundary.

Boundary Forces with a border of 100 pixels

Boundary Forces with default border

# boundary.hardBoundary([hardBoundary]) <>

If hardBoundary is specified and is a falsifiable value it will determine if the nodes are going to be forced to be inside the boundary. A false value will try to send the nodes inside the boundary, but won't force them. If hardBoundary is not specified, returns the current hardBoundary that defaults to true.

Installing

For the web

<script src="https://unpkg.com/[email protected]/dist/d3-force-boundary.min.js"></script>

With modules

npm install d3-force-boundary

Observable demo