CODEWITHSUNDEEP
javascriptd3.jsaxis
user3837019
user3837019

Reputation: 221

D3 Zooming on X axis

I’m trying to add a zoom feature to my bar chart. What I’m trying to achieve is when a user drags his cursor over a certain area, you should be able to zoom in to that area and the x axis value change to showing the number of days in that month. Following this example I’ve tried to incorporate the same zoom and drag feature.

But I seem to be getting this error:

Error: <rect> attribute transform: Expected number, "translate(NaN,0)".

What I’m trying to do with the zoom feature is once zoomed in the x axis should change from showing months (Jan, Feb, etc) to days (1 Jan, 2 Jan, 3 Jan, etc). Any help would be apperiated. Here’s the code for the zoom feature:

function bListener() {         
    x.domain(brush.empty() ? x.domain() : brush.extent());

    svg.selectAll(".bar")
       .attr("transform", function(d) { console.log(d.date); return "translate(" + x(d.date) + ",0)"; });

    svg.select(".x axis").call(xAxis);
}

Here’s the complete code.

Upvotes: 0

Views: 245

Answers (1)

Craicerjack
Craicerjack

Reputation: 6332

Your x function expects to be passed a number so d3 can work with it.
Currently youre passing it a string. d.date in this case is a the string "2013-03-21".
You need to format this into a number so that x can return a number for the translate function.
In this case change it into a date object using x(new Date(d.date)) 

svg.selectAll(".bar").attr("transform", function(d) { 
    console.log(d.date); 
    return "translate(" + x(new Date(d.date)) + ",0)"; 
});

Upvotes: 1

Related Questions