rgarcia · February 18, 2012 05:05 · rgarcia · Feb 18, 2012
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <body>
 <svg width="100%" height="100%"viewBox="0 0 50 50"></svg>
 </body>
 <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>   
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
 <script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
 <script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>
 <script type="text/javascript">

 var Circle = Backbone.Model.extend({});
 var Circles = Backbone.Collection.extend({ model: Circle });
 circles = new Circles();
 circles.reset([
  {id:1, x:10, y:10, r: 5, color: 'blue'}
  ,  {id:2, x:20, y:20, r: 5, color: 'blue'}
  ,  {id:3, x:30, y:30, r: 5, color: 'blue'}
  ,  {id:4, x:40, y:40, r: 5, color: 'blue'}
 ]);

 // The circles view controls the single svg element on the screen
 var CirclesView = Backbone.View.extend({

  initialize: function() {
    // bind to model change events and use enter() to modify the appropriate circle
    var self = this;
    self.collection.bind('change', function(model) {
      self.c
        .data([ model ], function(d) {return d.id;})
        .transition().delay(500).duration(1000)
        .attr("cx", function(d) { return d.get('x'); })
        .attr("cy", function(d) { return d.get('y'); })
        .attr("r", function(d) { return d.get('r'); })
        .style("fill", function(d) { return d.get('color'); });
      });
  },

  render: function() {
    this.$el.empty();
    this.svg = d3.select(this.el);

    // enter() passes on all data not reflected already (by key) in the selection
    // here all data points are passed on, and we append a circle for each
    this.c = this.svg.selectAll(".series")
      .data(this.collection.models, function(model) { return model.id; })
      .enter()
      .append("svg:circle")
      .call(this.circle_factory);

    return this;
  },

  // This helper function defines the initial shape of any new datapoints
  circle_factory : function(selection) {
    selection.attr("class","series")
        .attr("cx", function(d) { return d.get('x'); })
        .attr("cy", function(d) { return d.get('y'); })
        .attr("r", function(d) { return d.get('r'); })
        .style("fill", function(d) { return d.get('color'); });
  }
 });

 var circlesView = new CirclesView({ el: $('svg'), collection: circles });
 circlesView.render();

 setTimeout(function() { circles.models[0].set({"x":0} ); },1000);
 setTimeout(function() { circles.models[1].set({"r":6} ); },2000);
 setTimeout(function() { circles.models[2].set({"color":"red"} ); },3000);
 setTimeout(function() { circles.models[3].set({"y":10} ); },4000);

 </script>

 </html>
	<!DOCTYPE html>
	<html>
	<body>
	<svg width="100%" height="100%"viewBox="0 0 50 50"></svg>
	</body>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore.js"></script>
	<script type="text/javascript" src="http://documentcloud.github.com/backbone/backbone.js"></script>
	<script type="text/javascript">

	var Circle = Backbone.Model.extend({});
	var Circles = Backbone.Collection.extend({ model: Circle });
	circles = new Circles();
	circles.reset([
	{id:1, x:10, y:10, r: 5, color: 'blue'}
	, {id:2, x:20, y:20, r: 5, color: 'blue'}
	, {id:3, x:30, y:30, r: 5, color: 'blue'}
	, {id:4, x:40, y:40, r: 5, color: 'blue'}
	]);

	// The circles view controls the single svg element on the screen
	var CirclesView = Backbone.View.extend({

	initialize: function() {
	// bind to model change events and use enter() to modify the appropriate circle
	var self = this;
	self.collection.bind('change', function(model) {
	self.c
	.data([ model ], function(d) {return d.id;})
	.transition().delay(500).duration(1000)
	.attr("cx", function(d) { return d.get('x'); })
	.attr("cy", function(d) { return d.get('y'); })
	.attr("r", function(d) { return d.get('r'); })
	.style("fill", function(d) { return d.get('color'); });
	});
	},

	render: function() {
	this.$el.empty();
	this.svg = d3.select(this.el);

	// enter() passes on all data not reflected already (by key) in the selection
	// here all data points are passed on, and we append a circle for each
	this.c = this.svg.selectAll(".series")
	.data(this.collection.models, function(model) { return model.id; })
	.enter()
	.append("svg:circle")
	.call(this.circle_factory);

	return this;
	},

	// This helper function defines the initial shape of any new datapoints
	circle_factory : function(selection) {
	selection.attr("class","series")
	.attr("cx", function(d) { return d.get('x'); })
	.attr("cy", function(d) { return d.get('y'); })
	.attr("r", function(d) { return d.get('r'); })
	.style("fill", function(d) { return d.get('color'); });
	}
	});

	var circlesView = new CirclesView({ el: $('svg'), collection: circles });
	circlesView.render();

	setTimeout(function() { circles.models[0].set({"x":0} ); },1000);
	setTimeout(function() { circles.models[1].set({"r":6} ); },2000);
	setTimeout(function() { circles.models[2].set({"color":"red"} ); },3000);
	setTimeout(function() { circles.models[3].set({"y":10} ); },4000);

	</script>

	</html>