d3 enter update exit

by Amanda Williamson

JavaScript

var svg = d3.select('body').append('svg')
        .attr({'height': 500, 'width': 600, 'style': 'border: solid 2px black'});

svg.on('mousedown', mousedown);
svg.on('mouseup', mouseup);

var circleData = [ {x: 40, y: 40}, {x: 80, y: 80},
                   {x: 120, y: 120}, {x: 160, y: 160} ];

var newData = [ {x: 80, y: 80}, {x: 160, y: 160} ];

//setTimeout(function(){ circle.remove() }, 1000);

var circle = svg.selectAll("circle").data(circleData);

function mousedown() {
    console.log('mousedown');
    circle.enter().append("circle")
          .attr("r", 0)
          .transition()
          .attr("r", 25);
    circle.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; })
          .style('fill', 'green');    
   }

function mouseup() {
    console.log('mouseup');
    var circle = svg.selectAll("circle")
    .data(newData);
    circle.exit().transition()
        .attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; })
        .attr("r", 10)
        .style('fill', 'blue');   
        //.attr("r", 0).remove();  
}