how to make scrollable axis/ pan along x-axis in d3js

Question

I am trying to create a timeline chart using D3.js in angularjs with the option to scroll the along the x-axis to view data.

var rawSvg = element.find("svg")[0];

var width = 1000, height = 300;
var svg = d3.select(rawSvg)
                    .attr("width", width)
                    .attr("height", height);


// scale for x and y axis
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 axis
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);

// axis
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)
}

But I am not able to achieve so. I am getting a chart like this.

But what I want is to display the current date data and then the user should be able to scroll along the x-axis to see the past and future data.

I am trying to achieve something like this.

EDIT

In the above code I was not able to capture the zoom events so I have appended a full length rectangle now I can capture the zoom events.

g.append("rect")
            .attr("width", width)
            .attr("height", height-75)
            .style("fill", "none")
            .style("pointer-events", "all");

But still I am unable to scroll along the x-axis.

Are you trying to do something like this? bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172 — Gunner
@Gunner Something like this codepen.io/bennekrouf/pen/jqvqNZ?editors=0010 with options like in your example to zoom on a particular event but the data will be plotted as point — Tony Roczz

Shashank Shashank · Accepted Answer · 2017-12-22T18:03:38

It's funny that sometimes debugging an issue might take up a lot of time but then the solution would be a minor spelling/selection mistake. I did spend about 40 minutes on this but it's just a small selection mistake.

This is one such case. So here' the issue:

You are applying a class named x-axis (notice the dash here) to the X Axis BUT in your zoom function, you're looking for axis with .x.axis which is not right. So here's a fork of your fiddle that resolves the issue:

JS FIDDLE

Code Changes:

function zoomed(){
    svg.select('.x-axis').call(xAxis)
}

Also, I've changed the number of ticks on X axis to be every 6 hours to avoid overlapping.

Hope this helps. :)

how to make scrollable axis/ pan along x-axis in d3js

1 Answers