title: d3: update data appended on elements
body: <p>I have a graph with a line, two areas and a few circles in it: <a href="https://i.stack.imgur.com/MlZ09.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MlZ09.png" alt="the graph"></a></p>
  
  <p>I wrote an update method, which works just fine for everything except the circles:</p>
  
  <pre><code>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)
      });
  }
  </code></pre>
  
  <p>Everything transitions as expected but the circles. They just stay in place. My thought was: I append the updated data to each element and alter the cx and cy attributes accordingly, so the circles transition to their new place. But they don't move :( What am I doing wrong here?</p>
  
  <p>Here is the initial code for the circles:</p>
  
  <pre><code>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)
        })
      });
  </code></pre>
  
  <p>PS: I read abaout enter() and exit() <a href="https://medium.com/@c_behrens/enter-update-exit-6cafc6014c36#.psp08l7qi" rel="nofollow noreferrer">here</a> but don't really know, how they could be useful for updating the data which is appended on the elements.</p>
  
  <p>PPS: I tried selectAll() too, but it doesn't seem to have a data() function.</p>