Axis values transition

forked from tomshanley's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    line {
      stroke: black;
      shape-rendering: crispEdges;
    }
    
    text {
      text-anchor: middle;
    }
  </style>
</head>
<div id='chart'></div>
	<form-group>
      <label for="from">From:</label>
      <input type="number" min="0" max="360" step="1" value="40" id="from">
      <label for="to">To:</label>
      <input type="number" min="0" max="360" step="1" value="50" id="to">
    	<button id="change-button" onclick="updateAxis()">Update</button>
  </form-group>
<body>
  <script>
    
    console.clear()
    
    let ticks1 = [ 1,  2,  3,  4,  5,  6,  7]
    
    let width = 500
    let margin = 50
    
    let fromInput = d3.select("#from");
    let toInput = d3.select("#to");
    
    let format = d3.format(",.0f")
    
    let xScale = d3.scaleLinear()
    	.domain(d3.extent(ticks1))
    	.range([0, width])
        
    let xAxis = d3.axisBottom(xScale)
    	.tickValues(ticks1)
    	.tickFormat(format)
    
    var svg = d3.select("#chart").append("svg")
      .attr("width", width + margin + margin)
      .attr("height", margin + margin)

let axes = svg.append("g")
    	.attr("transform", "translate(" + margin + ", " + margin + ")")
    
    let domain = axes.append("line")
    	.attr("x1", 0)
    	.attr("x2", width)
    	.attr("y1", 0)
    	.attr("y2", 0)
    
    let xAxisG = axes.append("g")
    	.attr("transform", axisTranslate(ticks1))
    
    let ticks = xAxisG.selectAll(".tick")
    	.data(ticks1, d => d)
    	.enter()
    	.append("g")
    	.attr("class", "tick")
    	.attr("transform", tickTranslate)
    
    ticks.append("line")
    	.attr("x1", 0)
    	.attr("x2", 0)
    	.attr("y1", -15)
    	.attr("y2", -19)
    
    ticks.append("text")
    	.text(d => d)
    
    function updateAxis(){
      
      let currentTicks = ticks1
      
      let fromNumber = fromInput.property("value")
      let toNumber = toInput.property("value")
      
      if (fromNumber > toNumber) {
        let holder = toNumber
        toNumber = fromNumber
        fromNumber = holder
      }
      
      let newTicks = [fromNumber, toNumber]
      
      // increase the number of ticks     
      let extentAllTicks = d3.extent(currentTicks.concat(newTicks))
      let intermediateTicks = d3.range(extentAllTicks[0], extentAllTicks[1] + 1)
      
      ticks = xAxisG.selectAll(".tick")
        .data(intermediateTicks, d => d)
      	.join("g")
        .attr("class", "tick")
        .attr("transform", tickTranslate)
      
      ticks.append("text")
    		.text(d => d)
      
      ticks.append("line")
        .attr("x1", 0)
        .attr("x2", 0)
        .attr("y1", -15)
        .attr("y2", -19)
      
     	xScale
        .domain(newTicks)
    		.range([0, width])
      
      ticks.transition()
      	.duration(5000)
      	.attr("transform", tickTranslate)
      
      ticks.selectAll('text, line')
        .transition()
      	.duration(7000)
      	.style("opacity", function(d){
					return (d >= newTicks[0] && d <= newTicks[1]) ? 1 : 0
        })
      
    }
   
    
    function tickTranslate(d){
      return "translate(" + xScale(d) + ", 15)"
    }
    
    function axisTranslate(data){
      return "translate(" + xScale(data[0]) + ",0)"
    }

</script>
</body>

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