Tom Roth puzzler10

This graph combines force directed graphs, zooming and dragging, and the explanation behind the graph is available here.

This is an simple example of adding zoom to your graph.

Click here to read a more detailed explanation on how zoom works.

Example of zoom and drag in d3 v4.

This example has a modified drag function so that when you zoom in, you're still able to drag the circles to the correct mouse location. Here's an example of the drag problem.

It's not an easy way to do this task. Read this for an easier and better way, as well as an explanation of this code.

The big black rectangle captures mouse events, but sits behind the yellow circles.

Notice how you're able to zoom and pan while the mouse is over the black rectangle. It doesn't work when you're over the circle since its on top of the rectangle.

Two circles on the page. Try scrolling the mouse wheel on the left circle, then try on the right circle.

Click here for the explanation behind the code, or here for a list of zoom tutorials.

	<div id="errors" style="
	background: #c00;
	color: #fff;
	display: none;
	margin: -20px -20px 20px;
	padding: 20px;
	white-space: pre-wrap;
	"></div>
	<div id="root"></div>
	<script>

	-0.8171386568117702 -0.2959722029276907 0.035525489171865585 -0.11475660612204155 -0.14733362371162165 -2.4981375795253706 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 -0.01006292576293056 -0.1184148181435739 -0.15025661004988405 -2.4981375795253706 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 -0.01006292576293056 -0.11475660612204155 -0.14733362371162165 -2.4981375795253706 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 0.02640780618490636 -0.11475660612204155 -0.14733362371162165 -2.401680941117145 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 0.04737847705491259 -0.11475660612204155 -0.14733362371162165 -2.401680941117145 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 0.037349025769257437 -0.10500137406462197 -0.13953899347625529 -2.2087676643006935 0.12523907902300802 -1.6744632228464886
	-0.8171386568117702 -0.2959722029276907 0.037349025

	id_no origin_t country region source latitude longitude mb Ms depth yield_1 yield_u purpose name type date_long year _Year _Month _Week _Day _Dayofweek _Dayofyear _Quarter _Is_month_end _Is_month_start _Is_quarter_end _Is_quarter_start _Is_year_end _Is_year_start _Elapsed hour type_cat mb_I Ms_I x y z cluster_label
	45001 123000.0 USA ALAMOGORDO DOE 32.54 -105.57 0.0 0.0 -0.1 21.0 21.0 WR TRINITY TOWER 19450716 1945 1945 7 29 16 0 197 3 False False False False False False -771984000 12 ATMOSPHERIC 0 0 4.4668956 12.5813675 2.6080666 20
	45002 231500.0 USA HIROSHIMA DOE 34.23 132.27 0.0 0.0 -0.6 15.0 15.0 COMBAT LITTLEBOY AIRDROP 19450805 1945 1945 8 31 5 6 217 3 False False False False False False -770256000 23 ATMOSPHERIC 0 0 4.415407 12.520925 2.6735268 20
	45003 15800.0 USA NAGASAKI DOE 32.45 129.52 0.0 0.0 -0.6 21.0 21.0 COMBAT FATMAN AIRDROP 19450809 1945 1945 8 32 9 3 221 3 False False False False False False -769910400 15 ATMOSPHERIC 0 0 4.4433594 12.551545 2.6417017 20
	46001 220100.0 USA BIKINI DOE 11.35

	height: 1000
	scrolling: true