D3 Examples - 16.each-transition

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    
        <title>D3: Using each() to specify two transitions in sequence</title>
    
        <script src="https://d3js.org/d3.v4.min.js"></script>
        
    <style type="text/css">
            
            .axis path,
            .axis line {
                fill: none;
                stroke: black;
                shape-rendering: crispEdges;
            }
            
            .axis text {
                font-family: sans-serif;
                font-size: 11px;
            }
​
        </style>
    </head>
    <body>
    
        <p>Click on this text to update the chart with new data values as many times as you like!</p>
    
        <script type="text/javascript">
​
​
            var w = 500;
            var h = 300;
      var margin = {top: 30, bottom: 30, left: 30, right: 60};
      var width = w - margin.left - margin.right,
          height = h - margin.top - margin.bottom;
      
            var padding = 30;
            
​
            var dataset = [];                                       
            var numDataPoints = 50;                                     
            var maxRange = Math.random() * 1000;            
            for (var i = 0; i < numDataPoints; i++) {   
                var newNumber1 = Math.floor(Math.random() * maxRange);
                var newNumber2 = Math.floor(Math.random() * maxRange);
        
                dataset.push([newNumber1, newNumber2]);                 
            }
​
​
      var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h)
                    .append("g")
                    .attr("transform", "translate(" + margin.left +", " + margin.top + ")");      
​
      
      
            var xScale = d3.scaleLinear()
                       .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                       .range([0, width]);
​
            var yScale = d3.scaleLinear()
                       .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                       .range([height, 0]);
​
​
            var xAxis = d3.axisBottom(xScale)
                              .ticks(5);
​
​
            var yAxis = d3.axisLeft(yScale)
                              .ticks(5);
​
​
​
            svg.selectAll("circle")
               .data(dataset)
               .enter()
               .append("circle")
               .attr("cx", function(d) {
                    return xScale(d[0]);
               })
               .attr("cy", function(d) {
                    return yScale(d[1]);
               })
               .attr("r", 2);
            
​
            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0," + height + ")")
                .call(xAxis);
            
​
            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);
​
​
​
​
            d3.select("p")
                .on("click", function() {
​
​
                    var numValues = dataset.length;                             
                    var maxRange = Math.random() * 1000;                    
                    dataset = [];                                       
        
                    for (var i = 0; i < numValues; i++) {   
                        var newNumber1 = Math.floor(Math.random() * maxRange);
                        var newNumber2 = Math.floor(Math.random() * maxRange);
                        dataset.push([newNumber1, newNumber2]);                 
                    }
                    
​
                    xScale.domain([0, d3.max(dataset, function(d) { return d[0]; })]);
                    yScale.domain([0, d3.max(dataset, function(d) { return d[1]; })]);
​
​
                    svg.selectAll("circle")
                       .data(dataset)
//                       .attr("fill", "magenta")
//                       .attr("r", 7)
                       .transition()
                       .duration(1000)
// in v4, no more "start" and "end", just callback func as arg ---------------     
                       .each(function(d, i) { // d is each row of dataset, i is index
                           d3.select(this)
                             .attr("fill", "steelblue")
                 .attr("opacity", 0.1)
                             .attr("r", i);
                       })
                       .attr("cx", function(d) {
                            return xScale(d[0]);
                       })
                       .attr("cy", function(d) {
                            return yScale(d[1]);
                       })
                       .transition()
                       .duration(1000)
               .attr("r", 2)
               .attr("opacity", 1);
​
​
​
     
                    svg.select(".x.axis")
                        .transition()
                        .duration(1000)
                        .call(xAxis);
                    
                
                    svg.select(".y.axis")
                        .transition()
                        .duration(1000)
                        .call(yAxis);
​
                });
​
​
        </script>
    </body>
</html>
    