Skip to content

Instantly share code, notes, and snippets.

@dedan

dedan/d3update.html

Created January 4, 2013 10:05
Show Gist options
  • Save dedan/4451419 to your computer and use it in GitHub Desktop.
Save dedan/4451419 to your computer and use it in GitHub Desktop.
Download ZIP
# d3 update example this post helped me a lot to understand how elements can react to changes in the data [http://bost.ocks.org/mike/join/]
Raw
d3update.html
<html>
<head>
<title>scratch</title>
<link rel="stylesheet" href="scratch.css" type="text/css"/>
<script type="text/javascript" src="d3.v2.js"></script>
</head>
<body>
<div id='chart'></div>
<script type="text/javascript">
var circles = [
{id: 1, x: 10},
{id: 2, x: 20},
{id: 3, x: 40},
]
var chart = d3.select('#chart').append('svg')
.attr('width', 200)
.attr('height', 200)
.style('border', '1px solid black');
function do_stuff () {
var rects = chart.selectAll('rect').data(circles)
rects.enter()
.append('rect')
.attr('x', function(d) {return d.x})
.attr('y', 10)
.attr('width', 15)
.attr('height', 10)
.attr('fill', '#c63')
.attr('stroke', 'black')
rects.transition()
.attr('x', function(d) {return d.x})
rects.exit().remove()
}
do_stuff()
setTimeout(function() {
circles[0].x = 100;
do_stuff()
}, 2000)
setTimeout(function() {
circles.shift()
do_stuff()
}, 4000)
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment