d3.js – some transition

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>d3</title>
		<script src="js/jquery-1.11.1.min.js"></script>
        <script src="js/d3.v3.min.js" charset="utf-8"></script>
		<style>
		body {
			font-size: 12px;
		}
		</style>
	</head>
<body>
    <a href="#">update</a>
 
    <script>
        var data = [ 10, 13, 20, 54, 5, 15 ];
 
        var color = d3.scale.category20();
 
        var selection = d3.select("body")
            .append("svg")
            .selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
                .attr('r', 5)
                .attr("fill",function(d,i){return color(i);})
                .attr('cx', function(d){return d})
                .attr('cy', function(d){return d});
 
        $('a').click(function(){
            selection.transition()
            .duration(2000)
            .attr('cx', function(d){return Math.random() * 10 * d;})
            .attr('cy', function(d){return Math.random() * 10 * d;});
        });
    </script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *