重用选择以更新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选择器的正确方法是什么？