pack enter-exit-update

<!DOCTYPE html> 
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .text_16_2_5 {
      font: bold 48px monospace;
      fill: white
    }
    .charContainer {
      font: bold 0px monospace;
    }
    #charContainer {
      font: bold 0px monospace;
    }
    .exit_16_2_5 {
      font: bold 10px monospace;
      fill: red
    }
  </style>
</head>
<div id="alphaPack"></div>

<body>
  <script>
    const data = {
    "id": "charContainer",
    "value": 100,
    "children": []
};

const alphabet = "abcdefghijklmnopqrstuvwxyz".split("");
    
    let depthScale = d3.scaleOrdinal()
          .range(["#548687", "#FFFFC7", "#473335", "#93c464", "#75739F"]);

const diameter = 600;

const svg = d3.select("#alphaPack").append("svg")
    .attr("width", diameter)
    .attr("height", diameter)
    .append("g");

const alphaBubble = d3.pack()
    .size([diameter - 50, diameter - 50])
    .padding(5);

function update(data) {

let nodes = d3.hierarchy(data)
            .sum(d => d.value ? d.value : undefined);

// Data join by key to <g> nodes
    let node = svg.selectAll(".node")
        .data(alphaBubble(nodes).descendants())
//     		.attr('erea', function(d) {
//           console.log(d)
//         })

// Data join by key to circles
    let circles = svg.selectAll("circle")
        .data(nodes, d => d.id);

// UPDATE
    node.selectAll("circle")
        .attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "update_16_2_5")
    		.style('fill', d => depthScale(d.depth))
    		.attr('r', d => d.r)

// ENTER
    let enterNode = node.enter().append("g")
        .attr("class", "node");
        
    enterNode.append("circle")
        .attr("class", d => d.data.id === "charContainer" ? "container_16_2_5" : "enter_16_2_5")
        .style("fill-opacity", 1e-6)
    		.style("fill", d => depthScale(d.depth))
     
    enterNode.append("text")
        .attr("class", "text_16_2_5")
    		.text(d => d.data.id)
        .attr("dx", -14)
        .attr("dy", ".25em");

// All
    node.transition().duration(750)
        .attr("transform", d => "translate(" + d.x + ", " + d.y + ")");
        
    node.selectAll("circle")
      .transition()
        .duration(750)
        .attr("r", function(d) {
      console.log('d.r', d.r)
      return d.r
    })
        .style("fill-opacity", 1);

// EXIT
    node.exit().selectAll("circle")
        .attr("class", "exit_16_2_5");
      
    node.exit()
      .transition()
        .duration(750)
        .attr("transform", d => "translate(" + (+500) + ", " + (+500) + ")")
        .remove();

node.exit().selectAll("circle")
      .transition()
        .duration(750)
    		.style('fill', 'red')
//         .style("fill-opacity", 1e-6);    
}

function objectify(alphArr) {
    let objArr = [];
    for(let i = 0; i < alphArr.length; i++) {
        objArr.push({"id": alphArr[i], "value": 25});
    }
    return objArr;
}

data.children = objectify(alphabet);

update(data);

setInterval(function() {
    let newChildren = d3.shuffle(alphabet)
        .slice(0, Math.floor(Math.random() * 26))
        .sort();
    data.children = objectify(newChildren);
    update(data);
}, 2000);
  </script>
</body>

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