I am struggling to develop a timeline chart using D3.js in angularjs with the ability to scroll along the x-axis to explore data.
var rawSvg = element.find("svg")[0];
var width = 1000, height = 300;
var svg = d3.select(rawSvg)
.attr("width", width)
.attr("height", height);
// defining x and y axis scales
var xScale = d3.time.scale().domain([new Date(), d3.time.day.offset(new Date(), 5)]).range([0, width]);
var yScale = d3.scale.linear().domain([28, 0]).range([0, height-75]);
var zoom = d3.behavior.zoom().x(xScale).y(yScale).scaleExtent([1,1]).on("zoom", zoomed);
// setting up axes
var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(d3.time.hour, 3).innerTickSize(-(height-75)).outerTickSize(2);
var yAxis = d3.svg.axis().scale(yScale).orient("left").outerTickSize(2).ticks(0).tickFormat(function(d){
return '';
}).tickPadding(10);
var g = svg.append("g").attr("transform","translate(20,10)").call(zoom);
// rendering axes
g.append("g")
.attr("class", "x-axis")
.attr("transform","translate(0,"+(height-75)+")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "center");
g.append("g")
.attr("class", "y-axis")
.call(yAxis);
function zoomed(){
svg.select('.x.axis').call(xAxis)
// svg.select('.y.axis').call(yAxis)
}
Unfortunately, I have not been successful in achieving this. I end up with a chart similar to the one shown here.
My goal is to initially display current date data and enable users to scroll horizontally along the x-axis to view past and future data.
I am aiming for something like this visualization.
EDIT
In my previous code snippet, I was unable to capture the zoom events so I have added a full-length rectangle which now allows me to capture those events when zooming.
g.append("rect")
.attr("width", width)
.attr("height", height-75)
.style("fill", "none")
.style("pointer-events", "all");
Despite this modification, I am still facing challenges scrolling along the x-axis as intended.