From 4a3b7f81f62e608a4f38230ad07eb4206bb60087 Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Wed, 4 Oct 2017 00:55:15 -0400 Subject: [PATCH] Specify how the simulation affects the visual elements --- FORCE_DIRECTED_GRAPH.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/FORCE_DIRECTED_GRAPH.md b/FORCE_DIRECTED_GRAPH.md index 67fb6c9..22b3183 100644 --- a/FORCE_DIRECTED_GRAPH.md +++ b/FORCE_DIRECTED_GRAPH.md @@ -172,3 +172,29 @@ d3.forceSimulation() - The `d3.forceLink` function takes the array of links. It then uses the `source` and `target` attributes of each link data object to connect the nodes via their `.name` properties (as specified in the return value) - You can tack on `.distance()` to specify how long the connections are visually between each node + +## Specify how the simulation affects the visual elements + +- The simulation runs "ticks" which run very quickly +- Each time a new "tick" occurs, you can updated the visual elements +- This allows our simulation to animate +- D3 will tack on positional data to our regular data so that we can make use of it + +```javascript +d3.forceSimulation() + .nodes(nodesData) + .force("charge_force", d3.forceManyBody()) + .force("center_force", d3.forceCenter(WIDTH / 2, HEIGHT / 2)) //position centering force at center x,y coords + .force("links", d3.forceLink(linksData).id(function(datum){ + return datum.name + }).distance(160)) + .on("tick", function(){ + nodes.attr("cx", function(datum) { return datum.x; }) + .attr("cy", function(datum) { return datum.y; }); + + links.attr("x1", function(datum) { return datum.source.x; }) + .attr("y1", function(datum) { return datum.source.y; }) + .attr("x2", function(datum) { return datum.target.x; }) + .attr("y2", function(datum) { return datum.target.y; }); + }); +```