robinhouston/README.md

## README.md

      
    Raw
  

              README.md
            
          
    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.

  
## index.html
<!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 &amp; 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>
	<!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>