atul-github · July 11, 2015 11:49
diff --git a/index.html b/index.html
 <!--
 Author : Atul Pandit
 Email : [email protected] / [email protected]
 -->
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <title>Moving ball on horizontal surface in d3.js - by Atul</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
 </head>
 <body>
 <script>
    function DrawLine(svg, x1, y1, x2, y2) {
        svg.append('line')
            .attr({ x1: x1, y1: y1, x2: x2, y2: y2 })
            .style({ stroke: 'black', 'stroke-Width': '3' })
        ;
    }
    var gContainerId, gCanvasId, gTopGroupId;
    var svg;
    var colors = d3.scale.category20();

    function DrawPie(svg, x, y, r) {
        var svg2 = svg.append('g')
        .attr('transform', 'translate(' + x + ',' + y + ')')
        .attr({x:x, y:y, r:r});
        var arc = d3.svg.arc()
          .outerRadius(r);

        var pie = d3.layout.pie()
          .value(function (d) {
              return d;
          })
          ;
        var path = svg2.selectAll('path')
          .data(pie([20, 20, 20, 20, 20])) // pie - ball with 5 sections
          .enter()
          .append('path')
          .attr('class', 'arc')
          .attr('d', arc)
          .attr('fill', function (d, i) {
              return colors(i);
          });
        return svg2;
    }

    // moving ball from left to right and then right to left
    function StartGame(pie) {
        var r = parseFloat(pie.attr('r'));
        var y = pie.attr('y');
        var direction = 'right';
        var distancePerTick = 2; // unit - change to 1, 2, 3 like it to increase or descrease speed of ball
        var anglePerTick = (distancePerTick * 90) / r; // assuming ball moves distance r for angle 90 degree
        var distance = distancePerTick + r;
        var angle = anglePerTick;
        d3.timer(function () {
            pie.attr("transform", "translate(" + (distance) + "," + y + ") rotate(" + angle + "," + 0 + "," + 0 + ")");
            if (direction == 'right') {
                distance += distancePerTick;
                angle += anglePerTick;
            }
            else {
                distance -= distancePerTick;
                angle -= anglePerTick;
            }
            if (distance > document.getElementById(gContainerId).clientWidth - r) {
                direction = 'left';
            }
            else if (distance < r + 1) {
                direction = 'right';
            }
        }, 1000);
    }

    function Initialize(containerId) {
        var height = document.getElementById(containerId).clientHeight;
        var width = document.getElementById(containerId).clientWidth;
        gContainerId = containerId;
        gCanvasId = containerId + '_canvas';
        gTopGroupId = containerId + '_topGroup';
        svg = d3.select("#" + containerId).append("svg")
            .attr({ "id": gCanvasId, "width": width, "height": height })
            .append("g")
            .attr({ "id": gTopGroupId, 'x': 0, 'y': 0, "width": width, "height": height })
        ;
        startAngle = 0;
        return svg;
    }

 </script>

 <div id="mainDiv" style="width:960px; height:500px">
    <div id="drawAreaOuter" style="width:100%; height:100%; float:left; ">
        <div id="drawArea" style="width:100%; height:100%; border:1px solid gray">
        </div>
    </div>
 </div>

 <script>
    var svg = Initialize('drawArea');
    var x = 100, y = 200, r = 100;
    var w = document.getElementById(gContainerId).clientWidth;
    var h = document.getElementById(gContainerId).clientHeight;
    DrawLine(svg, 0, y+r, x + w, y+r);
    var pie = DrawPie(svg, r, y, r);
    StartGame(pie);
 </script>

 </body>
 </html>
	<!--
	Author : Atul Pandit
	Email : [email protected] / [email protected]
	-->
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>Moving ball on horizontal surface in d3.js - by Atul</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
	<script>
	function DrawLine(svg, x1, y1, x2, y2) {
	svg.append('line')
	.attr({ x1: x1, y1: y1, x2: x2, y2: y2 })
	.style({ stroke: 'black', 'stroke-Width': '3' })
	;
	}
	var gContainerId, gCanvasId, gTopGroupId;
	var svg;
	var colors = d3.scale.category20();

	function DrawPie(svg, x, y, r) {
	var svg2 = svg.append('g')
	.attr('transform', 'translate(' + x + ',' + y + ')')
	.attr({x:x, y:y, r:r});
	var arc = d3.svg.arc()
	.outerRadius(r);

	var pie = d3.layout.pie()
	.value(function (d) {
	return d;
	})
	;
	var path = svg2.selectAll('path')
	.data(pie([20, 20, 20, 20, 20])) // pie - ball with 5 sections
	.enter()
	.append('path')
	.attr('class', 'arc')
	.attr('d', arc)
	.attr('fill', function (d, i) {
	return colors(i);
	});
	return svg2;
	}

	// moving ball from left to right and then right to left
	function StartGame(pie) {
	var r = parseFloat(pie.attr('r'));
	var y = pie.attr('y');
	var direction = 'right';
	var distancePerTick = 2; // unit - change to 1, 2, 3 like it to increase or descrease speed of ball
	var anglePerTick = (distancePerTick * 90) / r; // assuming ball moves distance r for angle 90 degree
	var distance = distancePerTick + r;
	var angle = anglePerTick;
	d3.timer(function () {
	pie.attr("transform", "translate(" + (distance) + "," + y + ") rotate(" + angle + "," + 0 + "," + 0 + ")");
	if (direction == 'right') {
	distance += distancePerTick;
	angle += anglePerTick;
	}
	else {
	distance -= distancePerTick;
	angle -= anglePerTick;
	}
	if (distance > document.getElementById(gContainerId).clientWidth - r) {
	direction = 'left';
	}
	else if (distance < r + 1) {
	direction = 'right';
	}
	}, 1000);
	}

	function Initialize(containerId) {
	var height = document.getElementById(containerId).clientHeight;
	var width = document.getElementById(containerId).clientWidth;
	gContainerId = containerId;
	gCanvasId = containerId + '_canvas';
	gTopGroupId = containerId + '_topGroup';
	svg = d3.select("#" + containerId).append("svg")
	.attr({ "id": gCanvasId, "width": width, "height": height })
	.append("g")
	.attr({ "id": gTopGroupId, 'x': 0, 'y': 0, "width": width, "height": height })
	;
	startAngle = 0;
	return svg;
	}

	</script>

	<div id="mainDiv" style="width:960px; height:500px">
	<div id="drawAreaOuter" style="width:100%; height:100%; float:left; ">
	<div id="drawArea" style="width:100%; height:100%; border:1px solid gray">
	</div>
	</div>
	</div>

	<script>
	var svg = Initialize('drawArea');
	var x = 100, y = 200, r = 100;
	var w = document.getElementById(gContainerId).clientWidth;
	var h = document.getElementById(gContainerId).clientHeight;
	DrawLine(svg, 0, y+r, x + w, y+r);
	var pie = DrawPie(svg, r, y, r);
	StartGame(pie);
	</script>

	</body>
	</html>