title: Two lined D3.js line chart, with one line starting at different position
body: <p>I am creating a Line Chart in D3.js with two lines. The second line needs to start (and be rendered) and at a later date than the first. The data I am using for the graph looks like this:</p>
  
  <pre><code>var data = [{
      date: "1-May-12",
      close: "58.13",
      open: "58.13"
  }, {
      date: "30-Apr-12",
      close: "53.98",
      open: "53.98"
  }, {
      date: "27-Apr-12",
      close: "67.00",
      open: "67.00"
  }, {
      date: "26-Apr-12",
      close: 0,
      open: "89.70"
  }, {
      date: "25-Apr-12",
      close: 0,
      open: "99.00"
  }];
  </code></pre>
  
  <p>In my current example, both lines are plotted but the second line (close) is plotted at the bottom of the graph and then jumps to the third value. I need the line to start when there is data. I have tried changing the value from 0 to null without any success. How do I change the graph so the second line only starts when there is actual data? </p>
  
  <p>See this JSFiddle for the example: <a href="https://jsfiddle.net/londonfed/hprd452q/4/" rel="nofollow noreferrer">https://jsfiddle.net/londonfed/hprd452q/4/</a></p>
  
  <p>Thanks in advance.</p>