This is an attempt to create a timeline object that can be implemented quickly and easily on a webpage.
The jsObject manages the canvas that the timeline is rendered on.
This is the style component.
The bl.ocks.org is located here.
function slCanvas(top, right, bottom, left, width, height) | |
{ | |
this.setMargin("top", top); | |
this.setMargin("right", right); | |
this.setMargin("bottom", bottom); | |
this.setMargin("left", left); | |
this.negWidth = width - left - right; | |
this.posWidth = width + left + right; | |
this.negHeight = height - top - bottom; | |
this.posHeight = height + top + bottom; | |
} | |
slCanvas.prototype = { | |
constructor: slCanvas, | |
setMargin: function( targetedMargin, marginAmount ) | |
{ | |
this["_" + targetedMargin] = marginAmount; | |
} | |
} | |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
<link rel="stylesheet" type="text/css" href="style/svg.css"> | |
</head> | |
<body> | |
</body> | |
<script src="js/canvas.js" charset="utf-8"></script> | |
<script src="js/objTimeline.js" charset="utf-8"></script> | |
<script> | |
var newLine = new objTimeline( "2014-01-01", "2015-12-31" ); | |
</script> | |
</html> |
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")); | |
} | |
} |
.axis text | |
{ | |
font: 10px sans-serif; | |
} | |
.axis path, .axis line | |
{ | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} |
�PNG | |