CODEWITHSUNDEEP
javascriptd3.jsbar-chartaxis
user3837019
user3837019

Reputation: 221

D3 changing X Axis on zoom

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 http://bl.ocks.org/godds/ec089a2cf3e06a2cd5fc. I’ve tried to incorporate the same zoom and drag feature.

I seem to be having issue with changing my x axis values as I’m looking for a way to have the x axis change dynamically when a specific area is selected. Currently when you zoom in the bars all change position but my x axis values remain the same (still show the number of months whereas i want to show the number of days).

My X axis code:

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.month)
    .tickFormat(d3.time.format('%b %y'))
    .tickSize(0)
    .tickPadding(8);

My brush tool:

 function bListener(){
         x.domain(brush.empty() ? x.domain() : brush.extent());
            svg.select(".x axis").call(xAxis);

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

        });
}

Complete code can be found here: http://jsfiddle.net/noobiecode/wck4ur9d/32/

Any help would be appreciated as I feel my heads going to explode any minute.

Upvotes: 1

Views: 2595

Answers (1)

SiddP
SiddP

Reputation: 1663

Replace 

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

with 

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

moreover better to have a axis and domain for brush separate all together

var x2 = d3.time.scale().range([0, width]);

var brush = d3.svg.brush()
           .x(x2)
           .on('brush', bListener);
x2.domain(x.domain());

in your bListener function 

x.domain(brush.empty() ? x2.domain() : brush.extent());

Updated fiddle: http://jsfiddle.net/wck4ur9d/33/

Note: Brush and moving axis is not same as zoom.

Upvotes: 1

Related Questions