move tick labels to another group

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<svg width="500" height="500">
	
</svg>
</body>
<script type="text/javascript">
	var scale = d3.scaleLinear()
		.domain([0,100])
		.range([50,450]);

var axis = d3.axisLeft(scale);

var svg = d3.select('svg')
		.append('g').attr('transform','translate(50,25)')
	//create the axis geometry
	var geometry = svg.append('g').attr('class','axis-geometry')
		.call(axis);

//create a group on top of (i.e. after) that to hold the labels
	var labels = svg.append('g').attr('class','axis-labels')

geometry.selectAll('.tick text').each(function(){
		//for each tick text get the parents transform value
		var transformValue = d3.select(this.parentNode).attr('transform');

//append the node to the labels group and set the transform to that of the original nodes parent 		
		d3.select( labels.node().appendChild(this) )
			.attr('transform',transformValue)
	});
</script>
</html>

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