Created
April 3, 2020 01:18
-
-
Save jerng/3d20d8f54edb7959ae53a33ac37e353e to your computer and use it in GitHub Desktop.
d3 - Migration from v3 to v5 - forceSimulation - Adding New [data+element]s - Minimal Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 800 | |
| scrolling: no | |
| border: yes |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <h1><code>d3.js</code>, Version 3, Force Layout primer - how should this be converted to Version 5?</h1> | |
| <h2>For study purposes only</h2> | |
| <ul> | |
| <li>Cleaned up an example from : http://bl.ocks.org/tgk/6068367</li> | |
| <li>Cleaned up example uses d3 version 3.</li> | |
| <li>Original example license : none</li> | |
| <li>Original example uses d3 version 3.</li> | |
| </ul> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script src="../../../third-party/live.js"></script> | |
| <script> | |
| 'use strict' | |
| let p = thing => JSON.stringify ( thing, null, 2 ) | |
| let width = 500, | |
| height = 500 | |
| let dataArray = [ {} ] | |
| let simulation = d3.layout.force () | |
| .size ([width, height]) | |
| .nodes ( dataArray ) // initialize with a single node | |
| .charge (-500) | |
| .on ( 'tick', tickHandler) | |
| /* Necessary, but insufficient replacement: | |
| let simulation = d3.forceSimulation ( dataArray ) | |
| .force ( 'charge', d3.forceManyBody ().strength ( -1000 ) ) | |
| .force ( 'x', d3.forceX () ) | |
| .force ( 'y', d3.forceY () ) | |
| .alphaTarget ( 1 ) | |
| .on ( 'tick', tickHandler ) | |
| */ | |
| let svg = d3.select ( 'body' ).append ( 'svg' ) | |
| .attr ( 'width', width ) | |
| .attr ( 'height', height ) | |
| .attr ( 'style', 'background-color:#eee' ) | |
| .on ( 'mousedown', mousedownCanvas) | |
| let circles = svg.selectAll ( 'circle' ) | |
| function tickHandler () { | |
| circles .attr ( 'cx', function (d) { return d.x } ) | |
| .attr ( 'cy', function (d) { return d.y } ) | |
| } | |
| function restart () { | |
| circles = circles.data ( dataArray ) | |
| circles.enter ().insert ( 'circle').attr ( 'r', 5 ) | |
| circles.exit ().remove () | |
| simulation.start () | |
| } | |
| restart () | |
| //* | |
| function mousedownCanvas () { | |
| let point = d3.mouse (this), | |
| node = { x: point[0], y: point[1] } | |
| dataArray.push (node) | |
| restart () | |
| } | |
| function addNode () { | |
| dataArray.push ( { | |
| x: width / 2 + Math.random() * 150, | |
| y: height / 2 + Math.random() * 150 | |
| } ) | |
| restart() | |
| } | |
| setTimeout ( addNode, 1000 ) | |
| setTimeout ( addNode, 2000 ) | |
| setTimeout ( addNode, 3000 ) | |
| setTimeout ( addNode, 4000 ) | |
| //*/ | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment