pzeups · December 10, 2015 00:07
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    
    <title>Animation Test</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <style>
        body {
          font-family: Verdana;
          background-color: #fafafa;
        
          padding: 0;
          margin: 0;
        
          font-size: 16px;
          
          overflow: hidden;
        }
        .render circle {
            fill: #efefef;
            stroke: #000;
            stroke-width: 2px;
        }
        .render .link {
            stroke: #000;
            stroke-width: 2px;
        }
    </style>
 </head>
 <body>
    <svg class="render" width="100%" style="position: absolute;"></svg>
    <script>
        var width = window.innerWidth;
        var height = window.innerHeight;
        var render = d3.select('.render').attr('width', width).attr('height', height);
        
        var data = {a: 3*height/4, b: height/4};
        
        var a = render.selectAll('.a').data([data])
            .enter().append('circle')
                .classed('a',1).attr('r', 20).attr('cx', width/3).attr('cy', function(d) { return d.a });
        var b = render.selectAll('.b').data([data])
            .enter().append('circle')
                .classed('b',1).attr('r', 20).attr('cx', 2*width/3).attr('cy', function(d) { return d.b });
        var link = render.selectAll('.link').data([data])
            .enter().append('path')
                .classed('link',1)
                    .attr('d', function(d) { return 'M'+(width/3)+','+(3*height/4)+' L'+(2*width/3)+','+(height/4) })
        
        function repeat_a() { 
            a.transition().ease('linear').duration(800).attr('cy', height/4)
                .transition().attr('cy', 3*height/4).each('end', function() { repeat_a(); })
                    .each('end', function() { repeat_a(); }) 
        }
        repeat_a();
        
        function repeat_b() { 
            b.transition().ease('linear').duration(1600).attr('cy', 3*height/4)
                .transition().attr('cy', height/4).each('end', function() { repeat_b(); })
                    .each('end', function() { repeat_b(); }) 
        }
        repeat_b();
        
        function repeat_link() {
            link.transition().duration(1600).ease('linear')
                .attrTween('d', function(d) { 
                    return function(t) {
                        return 'M'+(width/3)+','+(t>.5 ? height*(t-1/4) : height*(3/4-t))+' L'+(2*width/3)+','+(height*(1/4+t/2)) 
                    }
                })
                    .transition()
                        .attrTween('d', function(d) { 
                            return function(t) {
                                return 'M'+(width/3)+','+(t>.5 ? height*(t-1/4) : height*(3/4-t))+' L'+(2*width/3)+','+(height*(3/4-t/2)) 
                            }
                        })
                            .each('end', function() { repeat_link(); })
        }
        repeat_link();

    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="default" />
	<meta name="viewport" content="user-scalable=no, width=device-width" />

	<title>Animation Test</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	body {
	font-family: Verdana;
	background-color: #fafafa;

	padding: 0;
	margin: 0;

	font-size: 16px;

	overflow: hidden;
	}
	.render circle {
	fill: #efefef;
	stroke: #000;
	stroke-width: 2px;
	}
	.render .link {
	stroke: #000;
	stroke-width: 2px;
	}
	</style>
	</head>
	<body>
	<svg class="render" width="100%" style="position: absolute;"></svg>
	<script>
	var width = window.innerWidth;
	var height = window.innerHeight;
	var render = d3.select('.render').attr('width', width).attr('height', height);

	var data = {a: 3*height/4, b: height/4};

	var a = render.selectAll('.a').data([data])
	.enter().append('circle')
	.classed('a',1).attr('r', 20).attr('cx', width/3).attr('cy', function(d) { return d.a });
	var b = render.selectAll('.b').data([data])
	.enter().append('circle')
	.classed('b',1).attr('r', 20).attr('cx', 2*width/3).attr('cy', function(d) { return d.b });
	var link = render.selectAll('.link').data([data])
	.enter().append('path')
	.classed('link',1)
	.attr('d', function(d) { return 'M'+(width/3)+','+(3height/4)+' L'+(2width/3)+','+(height/4) })

	function repeat_a() {
	a.transition().ease('linear').duration(800).attr('cy', height/4)
	.transition().attr('cy', 3*height/4).each('end', function() { repeat_a(); })
	.each('end', function() { repeat_a(); })
	}
	repeat_a();

	function repeat_b() {
	b.transition().ease('linear').duration(1600).attr('cy', 3*height/4)
	.transition().attr('cy', height/4).each('end', function() { repeat_b(); })
	.each('end', function() { repeat_b(); })
	}
	repeat_b();

	function repeat_link() {
	link.transition().duration(1600).ease('linear')
	.attrTween('d', function(d) {
	return function(t) {
	return 'M'+(width/3)+','+(t>.5 ? height(t-1/4) : height(3/4-t))+' L'+(2width/3)+','+(height(1/4+t/2))
	}
	})
	.transition()
	.attrTween('d', function(d) {
	return function(t) {
	return 'M'+(width/3)+','+(t>.5 ? height(t-1/4) : height(3/4-t))+' L'+(2width/3)+','+(height(3/4-t/2))
	}
	})
	.each('end', function() { repeat_link(); })
	}
	repeat_link();

	</script>
	</body>
	</html>