title: D3 function to parse the date not working
body: <p>I have a d3 visualisation that works fine with the current stable release (<code>3.x</code>) however I wanted to implement the <a href="http://bl.ocks.org/mbostock/2a39a768b1d4bc00a09650edef75ad39" rel="noreferrer">Pan &amp; Zoom</a> function so I upgraded to <code>4.alpha</code>.</p>
  
  <p>This threw a lot of bugs as the syntax has changed. I updated the variable names, however there is one remaining bug pertaining to the second line of the following code:</p>
  
  <pre><code>function type(d) {
     d.date = formatDate.parse(d.date);
     d.Flux = +d.Flux;
     return d;
  }
  </code></pre>
  
  <p>Opening up the page source via the browser, I see that <code>formatDate.parse is not a function.</code> The visualisation is currently not rendering.</p>
  
  <p>I have tried combing the D3 <code>4.alpha</code> <a href="https://github.com/d3/d3" rel="noreferrer">documentation</a>, to no avail.</p>
  
  <p>Further up in the code, <code>formatDate</code> is defined as follows:</p>
  
  <pre><code>var formatDate = d3.timeFormat("%d-%b-%y");
  </code></pre>
  
  <p>I am happy to post the original code, its about 70 lines long, and a bit hacky tho:</p>
  
  <hr>
  
  <pre><code>var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 1400// - margin.left - margin.right,
      height = 1400// - margin.top - margin.bottom;
  var formatDate = d3.timeFormat("%d-%b-%y");
  var x = d3.scaleLinear()
      .range([0, width]);
  var y = d3.scaleLinear()
      .range([height, 0]);
  var line = d3.line()
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.Flux); });
  var svg = d3.selectAll("#ExoPlanet, #ExoPlanet2").append("svg")
      .attr("width", '90%')
      .attr("height", '70%')
      .attr('viewBox','0 0 '+Math.min(width,height)+' '+Math.min(width,height))
      .attr('preserveAspectRatio','xMinYMin')
      .append("g")
      .call(d3.zoom()
          .scaleExtent([1 / 2, 4])
          .on("zoom", zoomed)) ;
  function zoomed() {
    var transform = d3.event.transform;
    circle.attr("transform", function(d) {
      return "translate(" + transform.applyX(d[0]) + "," + transform.applyY(d[1]) + ")";
    });
  }
  
  d3.tsv("/FluxTime.tsv", type, function(error, data) {
    if (error) throw error;
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain(d3.extent(data, function(d) { return d.Flux; }));
      svg.selectAll("dot")
          .data(data)
        .enter().append("circle")
          .attr("r", 2.0)
          .attr("cx", function(d) { return x(d.date); })
          .attr("cy", function(d) { return y(d.Flux); })
          .attr("stroke", "#CE9A76");
  });
  function type(d) {
    d.date = formatDate.parse(d.date));
    d.Flux = +d.Flux;
    return d;
  </code></pre>
  
  <p>}</p>
  
  <p>A screenshot of the first 8 entries in the dataset:</p>
  
  <p><a href="https://i.stack.imgur.com/HnKBY.png" rel="noreferrer"><img src="https://i.stack.imgur.com/HnKBY.png" alt="datums"></a></p>