1
0
mirror of https://github.com/d3/d3.git synced 2025-12-08 19:46:24 +00:00
d3/docs/d3-force/link.md
Mike Bostock 6d6c6792f1
vitepress docs (#3654)
* checkpoint vitepress docs

* edits

* edits

* hero drop shadow

* d3-array edits

* resolve d3

* split d3-array

* move d3-array stuff around

* d3-array is collapsed: true

* italicize parameter names

* searching edits

* update dependencies

* d3-array edits

* array edits

* array edits

* array edits

* array edits

* array edits

* move files

* array edits

* array edits

* array edits

* getting started edits

* modules page

* array edits

* more structure

* live example

* dsv edits

* fetch edits

* dsv edits

* random edits

* time format edits

* time edits

* time edits

* modules edits

* color edits

* color edits

* interpolate edits

* scale-chromatic edits

* selection edits

* break up d3-interpolate

* scale edits

* time scale edits

* scale edits

* scale edits

* band edits

* band edits

* more descriptive titles

* band and point edits

* sequential edits

* diverging edits

* quantize edits

* quantile edits

* threshold edits

* doc edits

* fix titles

* sequential edits

* axis edits

* axis edits

* axis edits

* shape edits

* shape edits

* dark mode chart

* dark mode chart

* curve edits

* interpolate edits

* line edits

* link edits

* radial edits

* pie edits

* symbol edits

* stack edits

* stack examples

* path edits

* polygon edits

* quadtree edits

* random examples

* ease edits

* ease edits

* ease edits

* timer edits

* delaunay edits

* quadtree find example

* voronoi edits

* dispatch edits

* contour edits

* chord edits

* chord edits

* fix find highlight

* quadtree animation

* transition edits

* transition edits

* transition edits

* zoom edits

* drag edits

* brush edits

* force edits

* voronoi neighbors example

* hierarchy edits

* api edits

* community edits

* getting started edits

* geo edits

* Add short "D3 in React" section (#3659)

* Add short "D3 in React" section

I know you removed the TODO but I was already trying to fill it in! I think just making the distinction of modules that touch the DOM and those that don't was super clarifying for me personally when I figured that out. And I always forget the most basic ref pattern (and still might've messed it up here). I don't think we should get into updating or interactivity or whatever, but I think just this much goes a long way toward demystifying (and showing just the most basic best practices).

* forgot i made data generic, rm reference to normal distribution

* useEffect cleans up after itself

Co-authored-by: Mike Bostock <mbostock@gmail.com>

* Update getting-started.md

---------

Co-authored-by: Mike Bostock <mbostock@gmail.com>

* build fixes

* index edits

---------

Co-authored-by: Toph Tucker <tophtucker@gmail.com>
2023-06-07 21:30:47 -04:00

5.8 KiB
Raw Blame History

Link force

The link force pushes linked nodes together or apart according to the desired link distance. The strength of the force is proportional to the difference between the linked nodes distance and the target distance, similar to a spring force.

Source · Creates a new link force with the specified links and default parameters. If links is not specified, it defaults to the empty array.

const link = d3.forceLink(links).id((d) => d.id);

Source · If links is specified, sets the array of links associated with this force, recomputes the distance and strength parameters for each link, and returns this force. If links is not specified, returns the current array of links, which defaults to the empty array.

Each link is an object with the following properties:

  • source - the links source node; see simulation.nodes
  • target - the links target node; see simulation.nodes
  • index - the zero-based index into links, assigned by this method

For convenience, a links source and target properties may be initialized using numeric or string identifiers rather than object references; see link.id. When the link force is initialized (or re-initialized, as when the nodes or links change), any link.source or link.target property which is not an object is replaced by an object reference to the corresponding node with the given identifier.

If the specified array of links is modified, such as when links are added to or removed from the simulation, this method must be called again with the new (or changed) array to notify the force of the change; the force does not make a defensive copy of the specified array.

Source · If id is specified, sets the node id accessor to the specified function and returns this force. If id is not specified, returns the current node id accessor, which defaults to the numeric node.index:

function id(d) {
  return d.index;
}

The default id accessor allows each links source and target to be specified as a zero-based index into the nodes array. For example:

const nodes = [
  {"id": "Alice"},
  {"id": "Bob"},
  {"id": "Carol"}
];

const links = [
  {"source": 0, "target": 1}, // Alice → Bob
  {"source": 1, "target": 2} // Bob → Carol
];

Now consider a different id accessor that returns a string:

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

With this accessor, you can use named sources and targets:

const nodes = [
  {"id": "Alice"},
  {"id": "Bob"},
  {"id": "Carol"}
];

const links = [
  {"source": "Alice", "target": "Bob"},
  {"source": "Bob", "target": "Carol"}
];

This is particularly useful when representing graphs in JSON, as JSON does not allow references. See this example.

The id accessor is invoked for each node whenever the force is initialized, as when the nodes or links change, being passed the node and its zero-based index.

Source · If distance is specified, sets the distance accessor to the specified number or function, re-evaluates the distance accessor for each link, and returns this force. If distance is not specified, returns the current distance accessor, which defaults to:

function distance() {
  return 30;
}

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

Source · If strength is specified, sets the strength accessor to the specified number or function, re-evaluates the strength accessor for each link, and returns this force. If strength is not specified, returns the current strength accessor, which defaults to:

function strength(link) {
  return 1 / Math.min(count(link.source), count(link.target));
}

Where count(node) is a function that returns the number of links with the given node as a source or target. This default was chosen because it automatically reduces the strength of links connected to heavily-connected nodes, improving stability.

The strength accessor is invoked for each link, being passed the link and its zero-based index. The resulting number is then stored internally, such that the strength of each link 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.

Source · If iterations is specified, sets the number of iterations per application to the specified number and returns this force. If iterations is not specified, returns the current iteration count which defaults to 1. Increasing the number of iterations greatly increases the rigidity of the constraint and is useful for complex structures such as lattices, but also increases the runtime cost to evaluate the force.