title: D3 : non continuous line chart with null values inside an object
body: <p>I'm trying to do a line chart very similar <a href="https://bl.ocks.org/mbostock/0533f44f2cfabecc5e3a" rel="nofollow noreferrer">from this example</a> provided by D3's creator himself.</p>
  
  <p>To deal with null values, he used a defined() function like this :</p>
  
  <pre><code>var line = d3.line()
  .defined(function(d) { return d; })
  .x(function(d) { return x(d.x); })
  .y(function(d) { return y(d.y); });
  </code></pre>
  
  <p>Then, if a null value is found instead of an object, it will be ignored and there'll be a hole in the chart like this :</p>
  
  <p><a href="https://i.stack.imgur.com/xZoAQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xZoAQ.png" alt="enter image description here"></a></p>
  
  <p>In this example, data are formated like this :</p>
  
  <pre><code>data = [null, {"x":x1, "y":y1}, {"x":x2, "y":y2}, null]
  </code></pre>
  
  <p>But I'm working on a cas a little more tricky, because it's a time serie formated like this :</p>
  
  <pre><code>data = [{"date":1980,"value":80},,{"date":1985,"value":82},{"date":1990,"valye":74},{"date":1995,"value":83},{"date":2000,"value":83},{"date":2005,"value":81},{"date":2010,"value":null},{"date":2015,"value":null}]
  </code></pre>
  
  <p>Like you can see, null values are inside several objects. In consequence, the defined() function described before doesn't work as well, and my graph line is like that :</p>
  
  <p><a href="https://i.stack.imgur.com/h8Sns.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/h8Sns.png" alt="enter image description here"></a></p>
  
  <p>Last values are considered as 0, not as "blanks" in the dataset. So my question is : can I modify the defined function to ignore null values like Mike Bostock's example ?</p>
  
  <p>Here's the entire code of my line graph :</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;style&gt; /* set the CSS */
  
  .line {
    stroke-width: 2px;
    fill:none;
  }
  
  .line:hover{
    stroke:#c2c2c2;
  }
  
  
  &lt;/style&gt;
  &lt;body&gt;
  
  &lt;script src="https://d3js.org/d3.v4.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  var margin = {top: 20, right: 165, bottom: 30, left: 50},
      width = 600 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var x = d3.scaleTime().range([0, width]);
  var y = d3.scaleLinear().range([height, 0]);
  
  
  var line = d3.line()
      .defined(function(d) { return d; })
      .x(function(d) { return x(d.date); })
      .y(function(d) { return y(d.value); });
  
  
  data = [{"date":1980,"value":80},{"date":1981,"value":80},{"date":1982,"value":81},{"date":1983,"value":81},{"date":1984,"value":96},{"date":1985,"value":82},{"date":1986,"value":84},{"date":1987,"value":76},{"date":1988,"value":75},{"date":1989,"value":75},{"date":1990,"value":74},{"date":1991,"value":78},{"date":1992,"value":77},{"date":1993,"value":79},{"date":1994,"value":81},{"date":1995,"value":83},{"date":1996,"value":82},{"date":1997,"value":82},{"date":1998,"value":81},{"date":1999,"value":83},{"date":2000,"value":83},{"date":2001,"value":84},{"date":2002,"value":85},{"date":2003,"value":84},{"date":2004,"value":85},{"date":2005,"value":81},{"date":2006,"value":83},{"date":2007,"value":78},{"date":2008,"value":null},{"date":2009,"value":null},{"date":2010,"value":null},{"date":2011,"value":null},{"date":2012,"value":null},{"date":2013,"value":null},{"date":2014,"value":null},{"date":2015,"value":null}]
  
  
  
  var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");
  
  
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, 100]);
  
  
    svg.append("path")
        .data([data])
        .attr("class", "line")
        .style("stroke", "#0F185B")
        .attr("d", line);
  
  
    svg.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .selectAll("text")  
          .style("text-anchor", "end")
          .attr("dx", "-.8em")
          .attr("dy", ".15em")
          .attr("font-size", "0.9em")
          .attr("width","40px")
          .attr("transform", "rotate(-65)")
          .text(function(d) {return +d; });
  
  
    svg.append("g")
        .call(d3.axisLeft(y));
  
  
  
  
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Thanks in advance !</p>