circles selection.join

forked from chule's block: circles enter-update-exit

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    
    var margin = {top: 50, right: 40, bottom: 50, left: 40};
    
    var svgWidth = 960,
        svgHeight = 500;

var width = svgWidth - (margin.left + margin.right);
    var height = svgHeight - (margin.top + margin.bottom);
    
    var svg = d3.select("body").append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)

var button = svg
    	.append("g")
    	.attr("transform", "translate(20,20)")
    
    button
    	.append("rect")
    	.attr("width", 110)
    	.attr("height", 50)
    	.attr("class", "button")
    	.style("fill", "darkred");
    
    button
    	.append("text")
    	.text("CLICK ME")
    	.attr("x", 10)
    	.attr("y", 32)
    	.style("fill", "white")
    	.style("pointer-events", "none")
    	.attr("font-family", "monospace")
    	.attr("font-size", 18)

var dataset0 = true;
    
    button.on("click", function() {

if (dataset0) {
      d3.select(".button")
      	.style("fill", "steelblue")
        draw(data1);
        dataset0 = false;
      } else {
      d3.select(".button")
      	.style("fill", "darkred")
        draw(data0);
        dataset0 = true;
      }
    });
    
		var data0 = [10,20,50,30,40,33,78];
    var data1 = [40,20,80,30,55,22,22,66];
    
    var extent = d3.extent(data0.concat(data1), function (d) {return d});
    
		var xScale = d3.scaleLinear()
        .domain(extent)
        .range([0, width]);    
    
    var mainG = svg.append("g")
    	.attr("transform","translate(" + [margin.left, margin.top] + ")");

function draw(data) {
      var circles = mainG.selectAll("circle")
        .data(data)
            .join(
        enter => enter.append("circle")
              .attr("cy", 200)
              .attr("r", function(d,i) {return d})
              .style("fill", "green")
              .attr("cx", d => xScale(d)),
              
        update => update
              .style("fill", "steelblue")
              .transition()
              .duration(750)
              .attr("cx", d => xScale(d)),
              
        exit => exit
              .style("fill", "darkred")
              .transition()
              .duration(750)
              .style("opacity", 0)
              .remove() 
        );
   	
     
    };

draw(data0);

</script>
</body>

https://d3js.org/d3.v5.min.js