sadet48 - d3js exit selection

d3js exit selection

<!DOCTYPE html>
<html>
<head>
<title>d3js exit selection</title>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<style type="text/css">
p{font-size:16px;color:red}
.app{
width:360px;
height:200px;
border:1px solid #ccc}
</style>
</head>
<body>
<p>d3js exit selection</p>
<div class="app"></div>
<script type="text/javascript">
var data = [10];
var svg = d3.select('.app')
    .append('svg')
    .attr("width", 360)
    .attr("beight", 200)
    .style("padding-top", "40")
    .style("padding-left", "15")
var circle1 =svg.append("circle")
     .attr("cy", 60)
     .attr("cx", 60)
     .attr("r", 50)
     .style("fill", "red")
     .style("stroke", "blue")
     .style("stroke-width", "5px")
var circle2 =svg.append("circle")
     .attr("cy", 60)
     .attr("cx", 165)
     .attr("r", 50)     
     .style("fill", "green")
     .style("stroke", "red")
     .style("stroke-width", "5px")
var circle3 =svg.append("circle")
     .attr("cy", 60)
     .attr("cx", 270)
     .attr("r", 50)     
     .style("stroke", "red")
     .style("stroke-width", "5px")
var circles = d3.selectAll("circle")
     .data(data)
     .exit()
     .style("fill", "yellow")
     .style("stroke", "red")
</script>
</body>
</html>