score:3

Accepted answer

Use d.value for your defined method:

var line = d3.line()
    .defined(function(d) {
        return d.value;
    })
    .x(function(d) {
        return x(d.date);
    })
    .y(function(d) {
        return y(d.value);
    });

Here is your updated code:

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.value;
  })
  .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));
path {
  fill: none;
  stroke: blue;
}
<script src="https://d3js.org/d3.v4.min.js"></script>


Related Query

More Query from same tag