Повторное использование выбора для обновления данных в d3js

Question

В этом примере я пытаюсь обновить данные, привязанные к выделению, я сохраняю выделение в переменной и обновляю данные https://codepen.io/anon/pen/ebYKRK:

let data = ['red'];

d3.select('svg').append('g');
let selection = d3.select('svg').select('g').selectAll('circle');
selection
  .data(data, d => d)
  .enter().append('circle')
    .attr('r', 4)
    .attr('fill', d => d)
    .attr('cx', (d, i) => 10 + 10 * i)
    .attr('cy', (d, i) => 10 + 10 * i)
    ;

setTimeout(() => {
  data = ['red', 'green'];
  // this will work -> d3.select('svg').select('g').selectAll('circle')
  selection
    .data(data, d => d)
      .attr('fill', 'black')
    .enter().append('circle')
      .attr('r', 4)
      .attr('fill', d => d)
      .attr('cx', (d, i) => 30 + 10 * i)
      .attr('cy', (d, i) => 30 + 10 * i)
      ;
}, 2000)

Я ожидаю, что этот код сделает существующий redкруг должен стать black, но он не работает так, вместо этого он выглядит как создание новых кругов.Но если я использую полный селектор d3, он работает как положено (существующий круг становится черным).

Я пытаюсь понять, почему это не работает, если я храню селектор в переменной?Или, если это какой-то неправильный код, каков будет правильный способ избежать записи полного селектора d3 каждый раз?