<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> |
<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>