d3：更新附加在元素上的数据

Question

我的图表中包含一行，两个区域和几个圆圈：

我写了一个更新方法，除了圆圈之外的所有内容都可以正常工作：

function updateGraph() {
  xScale.domain([startDate.getTime(), endDate.getTime()]);
  addTimedTickPadding(xAxis);
  yScale.domain([0, d3.max(interpolatedData, function (d) {
    return d.y0 + d.y1;
  })]);
  var updateGroup = parentGroup.transition();
  updateGroup.select('.xaxis')
    .duration(750)
    .call(xAxis);
  updateGroup.select('.yxaxis')
    .duration(750)
    .call(yAxis);
  updateGroup.select('.xgrid')
    .duration(750)
    .call(verticalGridLine());
  updateGroup.select('.area-top')
    .duration(750)
    .attr('d', areaTop(interpolatedData));
  updateGroup.select('.area-bottom')
    .duration(750)
    .attr('d', areaBottom(interpolatedData));
  updateGroup.select('.line')
    .duration(750)
    .attr('d', line(interpolatedData));
  updateGroup.select('.post')
    .duration(750)
    .data(interpolatedData)
    .attr('cx', function (d) {
      return xScale(dateParser.parse(d.x))
    })
    .attr('cy', function (d) {
      return yScale(d.y0 + d.y1)
    });
}

一切都按预期转变，但圈子。他们只是留在原地。我的想法是：我将更新的数据附加到每个元素并相应地更改cx和cy属性，以便圆圈过渡到它们的新位置。但他们不动:(我在这里做错了什么？

以下是圈子的初始代码：

dataGroup
    .selectAll('.post')
    .data(interpolatedData)
    .enter()
    .append('circle')
    .classed('post', true)
    .attr({
      'r': circleRadius,
      'fill': circleFillColor,
      'stroke-width': circleStrokeWidth,
      'stroke': circleStrokeColor,
      'cx': (function (d) {
        return xScale(dateParser.parse(d.x))
      }),
      'cy': (function (d) {
        return yScale(d.y0 + d.y1)
      })
    });

PS：我读了abaout enter（）和exit（）here，但实际上并不知道它们如何用于更新附加在元素上的数据。

PPS：我也尝试了selectAll（），但它似乎没有data（）函数。