|
function objTimeline(startDate, endDate) |
|
{ |
|
// Set default Format |
|
this.setFormat("%Y-%m-%d"); |
|
|
|
this.setStartDate( startDate ); |
|
this.setEndDate( endDate ); |
|
|
|
// Size the canvas |
|
this.setMargin( 100, 100, 100, 100, 960, 500 ); |
|
|
|
// Set the Scale for the timeline |
|
this.setScale(); |
|
|
|
// Build the SVG |
|
this.buildSVG(); |
|
} |
|
|
|
objTimeline.prototype = { |
|
|
|
constructor: objTimeline, |
|
|
|
// Set the format for the date display onscreen |
|
// Example : this.setFormat("%Y-%m-%d"); |
|
setFormat: function( newFormat ) |
|
{ |
|
this._format = d3.time.format( newFormat ); |
|
}, |
|
|
|
// Set the visibly uppermost reach of the timeline |
|
// Set the oldest date visible on the timeline |
|
// datePoint should follow setFormat |
|
setStartDate: function (datePoint) |
|
{ |
|
this._startDate = this._format.parse(datePoint); |
|
}, |
|
|
|
// Set the visibly lowermost reach of the timeline |
|
// Set the newest date visible on the timeline |
|
// datePoint should follow setFormat |
|
setEndDate: function (datePoint) |
|
{ |
|
this._endDate = this._format.parse(datePoint); |
|
}, |
|
|
|
// Set the margins in bulk for the SVG Canvas |
|
setMargin: function(top, right, bottom, left, width, height) |
|
{ |
|
this._margin = new slCanvas( top, right, bottom, left, width, height ); |
|
}, |
|
|
|
// Set the scale for the timeline |
|
// https://github.com/mbostock/d3/wiki/Time-Scales#_scale |
|
setScale: function () |
|
{ |
|
this._scale = d3.time.scale() |
|
.domain( [this._startDate, this._endDate] ) |
|
.nice( d3.time.week ) |
|
.range( [this._margin.negHeight, 0] ); |
|
}, |
|
|
|
buildSVG:function () |
|
{ |
|
this._svg = d3.select("body").append("svg") |
|
.attr( "width", this._margin.posWidth ) |
|
.attr( "height", this._margin.posHeight ) |
|
.append( "g" ) |
|
.attr( "transform", "translate(" + this._margin._left + "," + this._margin._top + ")"); |
|
this._svg |
|
.append( "g" ) |
|
.attr( "class", "x axis" ) |
|
.call( d3.svg.axis().scale(this._scale).orient("right")); |
|
} |
|
} |