<div class="chart">
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

let data = [1,2,3,4,5,6,7,8];

const el = d3.select('.chart')
const view = el.selectAll('p').data(data)

view
  .enter()
  .append('p')
  .html( (d,i) => 'enter_' + data[i] )

view
  .html( (d,i) => 'update_' + data[i] )

view
  .exit()
  .html( 'NO Data' )

// view
//   .enter()
//   .merge(view)
//   .append('p')
//   .html( (d,i) => 'enter_' + data[i] )

// view
//   .join(
//      enter => {
//       return enter
//         .append('p')
//     },
//     update => update,
//     exit => {
//       return exit
//        .html( (d,i) => 'NO Data' )
//     }
//   )
//   .html( (d,i) => 'total_' + data[i])