Data join in a line chart - d3.js

Question

I'm very new to d3, so goal #1 was to show the chart. This works with the following code:
const line = d3.line()
.x(d => this.x(d.x))
.y(d => this.y(d.y));
console.log('data', JSON.stringify(data), 'color', color);
// data [{"x":"2017-07-01T04:00:00.000Z","y":81.2},{"x":"2017-08-01T04:00:00.000Z","y":79.6},{"x":"2017-09-01T04:00:00.000Z","y":79.4},{"x":"2017-10-01T04:00:00.000Z","y":80.6},{"x":"2017-11-01T04:00:00.000Z","y":80},{"x":"2017-12-01T05:00:00.000Z","y":76}] color blue
g.append('path')
.datum(data)
.attr('class', 'line')
.attr('stroke', color)
.attr('d', line);
With this code, anytime I run this method again, I get a new line, which is expected since I'm appending. I want to update only the stroke and d attributes when I have new data and/or color, I replace the code after the console.log with:
const lines = g.selectAll('.line').data(data);
lines.enter()
.append('path')
.attr('class', 'line');
lines
.attr('stroke', color)
.attr('d', line);
I don't see the line anymore, not at first, not after updates.
I'm including a codepen with the code in this question: https://codepen.io/anon/pen/BJaVNM?editors=0010
Thanks again for your help!

Answer 1

The proper data join would be:
// give data an array, each part of the array is an array representing a line (ie path)
let lines = g.selectAll('.line').data([data]); //<-- notice array
// you have lines entering, .merge this back to the update selection
lines = lines.enter()
.append('path')
.attr('class', 'line')
.merge(lines);
// lines variable is now enter + update
lines
.attr('stroke', color)
.attr('d', line);
Updated codepen