dynamic grid w/ assorted styling

<!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;
      padding: 20px;
    }
    .axis .grid-line{
      stroke: black;
      shape-rendering: crispEdges;
      stroke-opacity: .2;
		}
    .control-group {
      padding: 20px 0px 20px 0px;
      margin: 15px 600px 0px 20px;
      background-color: #e5eef5;
      border: 16px groove #8a00a3;
      border-top: 4px dashed #8359be;
      border-left: 8px double pink;
      border-right: 8px dotted #61b7c1;  
      line-height: 100%;
      text-decoration: none;
      font-weight: bold;
      cursor: pointer;
      border-radius: 50px;
      box-shadow: 0 0 0 3px #fffa00, 10px 8px 16px 4px rgba(0, 0, 0, 0.3);
      text-shadow: -1px -1px #44ca65;
      font-weight: normal;
      text-align: center;
      opacity: 0.6;
    }
  </style>
</head>

<body>
  <div class="control-group">
    <button onclick="rescale()">rescale grid</button>
	</div>

svg.append("g")       
            .attr("class", "y-axis")
            .attr("transform", function(){
                return "translate(" + margin + "," + margin + ")";
            })
            .call(yAxis);
    }   
            
    function rescale(){
        var max = Math.round(Math.random() * 100);
        
        xAxis.scale().domain([0, max]); 
        svg.select("g.x-axis")
            .transition()
            .call(xAxis); 
            
        yAxis.scale().domain([max, 0]);
        svg.select("g.y-axis")
            .transition()
            .call(yAxis);
        
        renderXGridlines();
        renderYGridlines();
    }       
    
    function renderXGridlines(){
        d3.selectAll("g.x-axis g.tick")
                .select("line.grid-line")
                .remove(); 
                
        d3.selectAll("g.x-axis g.tick")
                .append("line")
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", 0)
                    .attr("y2", - yAxisLength);
    }
    
    function renderYGridlines(){
        d3.selectAll("g.y-axis g.tick")
                .select("line.grid-line").remove();
        
        d3.selectAll("g.y-axis g.tick")
                .append("line") 
                    .classed("grid-line", true)
                    .attr("x1", 0)
                    .attr("y1", 0)
                    .attr("x2", xAxisLength)
                    .attr("y2", 0);
    }
    
    renderYAxis();
    renderXAxis();
    renderXGridlines();
    renderYGridlines();
</script>

</body>

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