title: d3.js - logarithmic zoom on x-axis
body: <p>Please find below the code and this <a href="http://jsfiddle.net/V6n8v/14/" rel="nofollow">fiddle</a></p>
  
  <pre><code>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");
  </code></pre>
  
  <p>I want to apply logarithmic zoom on timeline. Here zoom distance can be managed by <code>brushextent</code> and If I use <code>Math.log(xScale)</code> it throws an error. So the issue is how do map <code>x-axis</code> if log is applied.</p>
  
  <p><strong>How do I make d3 zoom logarithmic ?????</strong></p>