d3.js - logarithmic zoom on x-axis

Please find below the code and this fiddle

var width = 900,
padding = 30;

var yScale = d3.scale.linear()
            .domain([0,0 ])   
            .range([0, 0]);   


var xScale = d3.scale.linear()
            .domain([-2000000000,2000000000])        
            .range([(padding/2), width - padding * 2]); 

   // console.log('hi');

var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);

        // define the y axis
var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .ticks(5)
            .tickSubdivide(10)
            .tickSize(-60,-60,60)
           .tickFormat(function (d) { return toYear(d);});

var containerSvg =  d3.select("#primaryTimelineBackground").append("svg")
                            .attr("class","primaryTimelineSvg")
                            .attr("width", "850px")
                            .attr("height","100px");

           containerSvg.selectAll("line.x")
                          .data(xScale.ticks(50))
                          .enter().append("line")
                          .attr("class", "xMinor")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                          .attr("y1", -45)
                          .attr("y2", 45)
                          .style("stroke", "#808080");

                        containerSvg.selectAll("line.x")
                          .data(xScale.ticks(5))
                          .enter().append("line")
                          .attr("class", "x")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                          .attr("y1", -50)
                          .attr("y2", 50)
                          .style("stroke-width",3)
                          .style("stroke", "#808080");

            // draw y axis with labels and move in extentStart the size by the amount of padding
            containerSvg.append("g")
                    .attr("transform", "translate(200,0)")
                    .call(yAxis);


            containerSvg.append("g")
                    .attr("class", "primaryXAxis")  
                    .attr("transform", "translate(0,40)")
                    .call(xAxis);

var zoom = d3.behavior.zoom().x(xScale).on("zoom");

I want to apply logarithmic zoom on timeline. Here zoom distance can be managed by brushextent and If I use Math.log(xScale) it throws an error. So the issue is how do map x-axis if log is applied.

How do I make d3 zoom logarithmic ?????

from d3.js - logarithmic zoom on x-axis