# d3js - enter(), update() and exit()

# d3js - enter(), update() and exit()

by jihoon kim

HTML

<script src="https://d3js.org/d3.v5.min.js"></script>
<h1>d3js - enter(), update() and exit()</h1>
<xmp>
    참고 : http://bl.ocks.org/alansmithy/e984477a741bc56db5a5
</xmp>

CSS

svg {width:500px; height:500px}
    button  {float:left}
    line    {stroke:#ddd;shape-rendering: crispEdges;}
    text    {text-anchor:middle;}
    circle {fill:orange;stroke:orange;fill-opacity:0.5;}
    .axis line {fill:none;stroke:#ddd;shape-rendering: crispEdges;}
    .axis path  {fill:none;}
    .axis text {font-size:0.7em;fill:#555;font-family:sans-serif}

JavaScript

//2 different data arrays
    var dataArray1 = [30,35,45,55,70];
    var dataArray2 = [50,55,45,35,20,25,25,40];

    //globals
    var dataIndex=1;
    var xBuffer=50;
    var yBuffer=150;
    var lineLength=400;


    //create main svg element
    var svgDoc = d3.select("body").append("svg")

    svgDoc.append("text")
            .attr("x",xBuffer+(lineLength/2))
            .attr("y",50)
            .text("dataset"+dataIndex);

    //create axis line
    svgDoc.append("line")
            .attr("x1",xBuffer)
            .attr("y1",yBuffer)
            .attr("x1",xBuffer+lineLength)
            .attr("y2",yBuffer)

    //create basic circles
    svgDoc.append("g").selectAll("circle")
            .data(eval("dataArray"+dataIndex))
            .enter()
            .append("circle")
            .attr("cx",function(d,i){
                var spacing = lineLength/(eval("dataArray"+dataIndex).length);
                return xBuffer+(i*spacing)
            })
            .attr("cy",yBuffer)
            .attr("r",function(d,i){return d});

    //button to swap over datasets
    d3.select("body").append("button")
            .text("change data")
            .on("click",function(){
                //select new data
                if (dataIndex==1) {
                    dataIndex=2;
                } else   {
                    dataIndex=1;
                }
                //rejoin data
                var circle = svgDoc.select("g").selectAll("circle")
                        .data(eval("dataArray"+dataIndex));

                circle.exit().remove();//remove unneeded circles
                circle.enter().append("circle")
                        .attr("r",0);//create any new circles needed

                //update all circles to new positions
                circle.transition()
                        .duration(500)
                        .attr("cx",function(d,i){
                            var spacing = lineLength/(eval("dataArray"+dataIndex).length);
             ...