If you press the “Timer & stop” button while the layout is running, then the restart button will not subsequently work. It seems that creating a timer before stopping the layout prevents the layout from being restarted.
Created
June 10, 2016 12:03
-
-
Save robinhouston/39a9f6e05a7b3a0fceca77051a9d1453 to your computer and use it in GitHub Desktop.
(timer) Force layout issue with D3 v4.0.0 alpha.45
This file contains hidden or 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> | |
| <html> | |
| <head> | |
| <title>Force layout issue (D3 v4.0.0 alpha.45)</title> | |
| <script src="https://d3js.org/d3.v4.0.0-alpha.45.js"></script> | |
| <style> | |
| * { box-sizing: border-box; } | |
| html, form { height: 100%; } | |
| body { margin: 0; padding: 0 8px; height: calc(100% - 8px); } | |
| div { margin: 8px; } | |
| buttom { margin: 0 16px; } | |
| textarea { width: 100%; height: calc(100% - 35px); font-family: monospace; } | |
| </style> | |
| </head> | |
| <body> | |
| <form onsubmit="return false"> | |
| <div> | |
| <button id="stop-button">Stop</button> | |
| <button id="timer-and-stop-button">Timer & stop</button> | |
| <button id="restart-button">Restart</button> | |
| <button id="reset-button">Reset alpha</button> | |
| </div> | |
| <textarea></textarea> | |
| </form> | |
| <script> | |
| var textarea = document.querySelector("textarea"); | |
| function log() { | |
| var text = Array.prototype.join.call(arguments, " "); | |
| textarea.appendChild(document.createTextNode(text + "\n")); | |
| textarea.scrollTop = textarea.scrollHeight; | |
| } | |
| var nodes = d3.range(100).map(function(i) { return {index: i} }); | |
| var layout = d3.forceSimulation(nodes) | |
| .on("tick", function() { log("tick", this.alpha()); }); | |
| function stopLayout() { layout.stop(); log("Stopped layout"); } | |
| function restartLayout() { layout.restart(); log("Restarted layout"); } | |
| function resetLayoutAlpha() { layout.alpha(1); log("Reset layout alpha to 1"); } | |
| function createTimerAndStopLayout() { | |
| // It seems that creating a timer while the layout is running | |
| // and then stopping the layout prevents it from being restarted. | |
| var timer; | |
| timer = d3.timer(function(t) { | |
| log("Timer ticked", t); | |
| timer.stop(); | |
| log("Timer stopped"); | |
| }); | |
| log("Created timer"); | |
| stopLayout(); | |
| } | |
| d3.select("#stop-button").on("click", stopLayout); | |
| d3.select("#timer-and-stop-button").on("click", createTimerAndStopLayout); | |
| d3.select("#restart-button").on("click", restartLayout); | |
| d3.select("#reset-button").on("click", resetLayoutAlpha); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment