<!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>