Issue in making Model and view to work in backbone.js

Issue in making Model and view to work in backbone.js

I am using the exact code from here:
http://jsfiddle.net/sameersegal/NHAvS/ this is in backbone structure and
what I want to do is that to separate them in three different files Model,
view and collection. as you can see in this jsfiddle all of them (MVC) are
in the same file. Now after doing this my problem is that due to lack of
some part that I really do now know where, the graph does not show. I
think the Model and view and collection do not find eachtoher and I should
add something to make them work. Actually I do not receive any error when
I run the program! this is my code
////////////dataPointModel
define([
"jquery",
"underscore",
"backbone",
"d3",
"js/collections/dataSeriesCollection"
], function($,_, Backbone, d3,
DataSeriesCollection){
var DataPointModel = Backbone.Model.extend({
initialize: function(x) {
this.set({
x: x
});
},
type: "point",
randomize: function() {
this.set({
x: Math.round(Math.random() * 10)
});
}
});
return DataPointModel;
});
////////////////////////dataSeriesCollection
define([
"underscore",
"backbone",
"js/models/dataPointModel"
],function(_, Backbone, DataPointModel){
var DataSeriesCollection = Backbone.Collection.extend({
model: DataPointModel,
fetch: function() {
this.reset();
this.add([
new DataPoint(10),
new DataPoint(12),
new DataPoint(15),
new DataPoint(18)
]);
},
randomize: function() {
this.each(function(m) {
m.randomize();
});
}
});
return DataSeriesCollection;
});
///////////////barGraphView
define([
"jquery",
"underscore",
"backbone",
"js/models/dataPointModel",
"js/collections/dataSeriesCollection",
"text!templates/dataPoint.html"
], function($, _ , Backbone,
DataPointModel,
DataSeriesCollection,
DataPointTemplate){
var BarGraphView = Backbone.View.extend({
el : $("#maincontent"),
dataPointTemplate : _.template(DataPointTemplate),
initialize : function(){
// I think I should add something more here!!
_.bindAll(this, "render", "frame");
this.collection.bind("reset", this.frame);
this.collection.bind("change", this.render);
this.chart =
d3.selectAll($(this.el)).append("svg").attr("class",
"chart").attr("width", w).attr("height",
h).append("g").attr("transform", "translate(10,15)");
this.dataSeriesCollection = new DataSeriesCollection();
this.collection.fetch();
this.dataPointModel = new DataPointModel({collection:
dataSeriesCollection});
},
render : function(){
var data = this.collection.models;
var x = d3.scale.linear().domain([0, d3.max(data, function(d) {
return d.get("x");
})]).range([0, 100 - 10]);
var y = d3.scale.ordinal().domain([0, 1, 2, 3]).rangeBands([0, h -
20]);
var self = this;
var rect = this.chart.selectAll("rect").data(data, function(d, i) {
return i;
});
rect.enter().insert("rect", "text").attr("y", function(d) {
return y(d.get("x"));
}).attr("width", function(d) {
return x(d.get("x"));
}).attr("height", y.rangeBand());
rect.transition().duration(1000).attr("width", function(d) {
return x(d.get("x"));
}).attr("height", y.rangeBand());
rect.exit().remove();
var text = this.chart.selectAll("text").data(data, function(d, i) {
return i;
});
text.enter().append("text")
.attr("x", function(d) {
return x(d.get("x"));
})
.attr("y", function(d,i) { return y(i) + y.rangeBand() / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(function(d) { return d.get("x");});
text
.transition()
.duration(1100)
.attr("x", function(d) {
return x(d.get("x"));
})
.text(function(d) { return d.get("x");});
this.$el.html(this.dataPointTemplate());
return this;
},
frame: function() {
this.chart.append("line").attr("y1", 0).attr("y2", 100 -
10).style("stroke", "#000");
this.chart.append("line").attr("x1", 0).attr("x2", 200).attr("y1",
100 - 10).attr("y2", 100 - 10).style("stroke", "#000");
},
show:function() { // I added JQuery in Jsfiddle in a separate
function! Maybe the problem is here
$(function() {
var dataSeries = new DataSeries();
new BarGraph({
collection: dataSeries
}).render();
setInterval(function() {
dataSeries.randomize();
}, 2000);
});
}
});
return BarGraphView;
});
I also added some comments is between for the changes that I did compared
to Jsfiddle.
Thanks indeed