JSFiddle - React, Tailwind, and code Playground

by Алексей Данчин

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script>
<div id="project"></div>

CSS

body {background: grey;}
svg {background: white;}

JavaScript

;(function () {

	////////////////////////////////////
	///             DATUM            ///
	////////////////////////////////////
	var refreshRete = 1,
		canvasWidth = 500,
		canvasHeight = 500,
		overseerPoint = {x: canvasWidth/2, y: canvasHeight/2, r: 5, fill: 'red'}
		cageArray = {r: 75, 'stroke-dasharray': '5,5', stroke: 'red', 'stroke-width': 2},
		prisonerPoint = {x: canvasHeight/2, y: overseerPoint.y - cageArray.r/2, r: 5, fill: 'black'};

	////////////////////////////////////
	///             INIT             ///
	////////////////////////////////////
	var svg = d3.select('div#project').append('svg')
			.attr({
				width: canvasWidth,
				height: canvasHeight
			});

	var cage = svg.append('circle')
			.data([cageArray])
			.attr({
				cx: overseerPoint.x,
				cy: overseerPoint.y,
				r: function (d) { return d.r; },
				'stroke-dasharray': function (d) { return d['stroke-dasharray']; },
				stroke: function (d) { return d.stroke; },
				'stroke-width': function (d) { return d['stroke-width']; },
				fill: 'rgba(0, 0, 0, 0)'
			});

	var overseer = svg.append('circle')
			.data([overseerPoint])
			.attr({
				cx: function (d) { return d.x; },
				cy: function (d) { return d.y; },
				r:  function (d) { return d.r; },
				fill: function (d) { return d.fill; },
			}).call(d3.behavior.drag()
				.on('drag', function (d) {
					if (distance(d3.event, prisonerPoint) + prisonerPoint.r <= cageArray.r) {
						d.x = d3.event.x;
						d.y = d3.event.y;
					}
				})
			);

	var prisoner = svg.append('circle')
			.data([prisonerPoint])
			.attr({
				cx: function (d) { return d.x },
				cy: function (d) { return d.y },
				r: function (d) { return d.r },
				fill: function (d) { return d.fill }
			}).call(d3.behavior.drag()
				.on('drag', function (d) {
					if (distance(d3.event, overseerPoint) + d.r <= cageArray.r) {
						d.x = d3.event.x;
						d.y = d3.event.y;
					}
				})
			);


	////////////////////////////////////
	///       MAIN POJECT LOOP      ...