diff --git a/gantt-chart-d3.js b/gantt-chart-d3.js index c79dad3..66a75ce 100644 --- a/gantt-chart-d3.js +++ b/gantt-chart-d3.js @@ -14,8 +14,8 @@ d3.gantt = function() { left : 150 }; var selector = 'body'; - var timeDomainStart = d3.time.day.offset(new Date(),-3); - var timeDomainEnd = d3.time.hour.offset(new Date(),+3); + var timeDomainStart = d3.timeDay.offset(new Date(),-3); + var timeDomainEnd = d3.timeHour.offset(new Date(),+3); var timeDomainMode = FIT_TIME_DOMAIN_MODE;// fixed or fit var taskTypes = []; var taskStatus = []; @@ -32,20 +32,21 @@ d3.gantt = function() { return "translate(" + x(d.startDate) + "," + y(d.taskName) + ")"; }; - var x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true); + var x = d3.scaleTime().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true); - var y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1); + var y = d3.scaleBand().domain(taskTypes).range([ 0, height - margin.top - margin.bottom ]).padding(.1); - var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true) + var xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(tickFormat)) + //.tickSubdivide(true) .tickSize(8).tickPadding(8); - var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0); + var yAxis = d3.axisLeft(y).tickSize(0); var initTimeDomain = function(tasks) { if (timeDomainMode === FIT_TIME_DOMAIN_MODE) { if (tasks === undefined || tasks.length < 1) { - timeDomainStart = d3.time.day.offset(new Date(), -3); - timeDomainEnd = d3.time.hour.offset(new Date(), +3); + timeDomainStart = d3.timeDay.offset(new Date(), -3); + timeDomainEnd = d3.timeHour.offset(new Date(), +3); return; } tasks.sort(function(a, b) { @@ -60,12 +61,13 @@ d3.gantt = function() { }; var initAxis = function() { - x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true); - y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1); - xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true) + x = d3.scaleTime().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true); + y = d3.scaleBand().domain(taskTypes).range([ 0, height - margin.top - margin.bottom ]).padding(.1); + xAxis = d3.axisBottom(x).tickFormat(d3.timeFormat(tickFormat)) + //.tickSubdivide(true) .tickSize(8).tickPadding(8); - yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0); + yAxis = d3.axisLeft(y).tickSize(0); }; function gantt(tasks) { @@ -95,7 +97,7 @@ d3.gantt = function() { }) .attr("y", 0) .attr("transform", rectTransform) - .attr("height", function(d) { return y.rangeBand(); }) + .attr("height", function(d) { return y.bandwidth(); }) .attr("width", function(d) { return Math.max(1,(x(d.endDate) - x(d.startDate))); }); @@ -134,14 +136,14 @@ d3.gantt = function() { .transition() .attr("y", 0) .attr("transform", rectTransform) - .attr("height", function(d) { return y.rangeBand(); }) + .attr("height", function(d) { return y.bandwidth(); }) .attr("width", function(d) { return Math.max(1,(x(d.endDate) - x(d.startDate))); }); rect.transition() .attr("transform", rectTransform) - .attr("height", function(d) { return y.rangeBand(); }) + .attr("height", function(d) { return y.bandwidth(); }) .attr("width", function(d) { return Math.max(1,(x(d.endDate) - x(d.startDate))); });