使用d3.js 的join()函数处理dom元素的更新

var myData = [ 10, 40, 30, 50, 20 ];

var u = d3.select('.container').selectAll('circle')
  .data(myData);

u.enter()
  .append('circle')
  .merge(u)
  .attr('r', function(d) { return d; });

u.exit()
  .remove();

var myData = [ 10, 40, 30, 50, 20 ];

d3.select('.container')
  .selectAll('circle')
  .data(myData)
  .join('circle')
  .attr('r', function(d) { return d; });

var myData = [10, 40, 30, 50, 20];

var circleSpacing = 100;
var transitionDuration = 500;

d3.select('g.container')
  .selectAll('circle')
  .data(myData)
  .join(
    function(enter) {
      return enter
          .append('circle')
          .style('opacity', 0);
    },
    function(update) {
       return update;
    },
    function(exit) {
      return exit
        .transition()
        .duration(transitionDuration)
        .attr('r', 0)
        .style('opacity', 0)
        .attr('cx', 1000)
        .on('end', function() {
          d3.select(this).remove();
        });
    }
  ).attr('cx', function(d, i) {
      return i * circleSpacing;
    })
    .transition()
    .duration(transitionDuration)
    .attr('r', function(d) {
      return d;
    })
    .style('opacity', 1);