D3 Examples - Axis Transition

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin: 0;
        }
    </style>
</head>
<body>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://unpkg.com/d3-marcon/build/d3-marcon.min.js"></script>
    <script>
        var m = d3.marcon().width(window.innerWidth).height(window.innerHeight).left(20).right(20);
        m.render();
        var width = m.innerWidth(), height = m.innerHeight(), svg = m.svg();
​
        var x = d3.scaleLinear()
            .range([0, width])
            .domain([0, width]);
​
        var x_axis = d3.axisBottom()
            .scale(x);
​
        svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0, " + height / 2 + ")")
                .call(x_axis);
​
    
    update();
    
        d3.interval(update, 1000);
​
        function update(){
            x.domain([0, random(10, 10000)]);
​
            svg.select(".x")
                .transition()
                    .call(x_axis);
​
        }
​
        // random number function
        function random(min, max){
          return Math.floor(Math.random() * (max - min + 1) + min);
        }
​
    </script>
​
</body>
</html>
    