d3.js - axis arrowhead direction wrong - d3.js

Question

Arrow head works fine on line draw but direction is wrong on axis!
live_update()
function live_update() {
var data1 = []
var n = 20
for (var i=0;i<=n;i++) {
data1.push({x:i,y:i*i})
}
var data2 = []
for (var i=0;i<=n;i++) {
data2.push({x:i,y:Math.sin(2*Math.PI/n*i)})
}
var toggle = 1
var div = d3.select('body').append('div')
div.append('button')
.text("update")
.on('click',(event,d) => {
console.log('click')
if (toggle == 0) {
update(data1)
toggle = 1
}else{
update(data2)
toggle = 0
}
})
var margin = {top: 10, right: 30, bottom: 30, left: 50},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.attr('class','box')
var aw = 6
var ah = 4
svg
.append("defs")
.append("marker")
.attr("id", "arrow")
.attr("refX", aw+1)
.attr("refY", ah/2+1)
.attr("markerWidth", aw+2)
.attr("markerHeight", ah+2)
.attr("orient", "auto")
.append("path")
.attr("d", ['M',1+aw/5,1+ah/2,'L',1,1,1+aw,1+ah/2,1,1+ah,'z'].join(' '));
svg.append('line').attr('class','avline')
var x = d3.scaleLinear().range([0,width]);
var xAxis = d3.axisBottom().scale(x);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.attr("class","myXaxis")
var y = d3.scaleLinear().range([height, 0]);
var yAxis = d3.axisLeft().scale(y);
svg.append("g")
.attr("class","myYaxis")
function update(data) {
var duration = 1000
var xmax = d3.max(data, function(d) { return d.x })
x.domain([d3.min(data,d => d.x), xmax]);
var xaxis = svg.selectAll(".myXaxis").transition()
.duration(duration)
.call(xAxis);
var ymin = d3.min(data,d => d.y)
y.domain([ymin, d3.max(data, function(d) { return d.y }) ]);
var yaxis = svg.selectAll(".myYaxis")
.transition()
.duration(duration)
.call(yAxis);
var frame = d3.select('.box')
frame.selectAll(".lineTest1")
.data([data])
.join("path")
.attr("class","lineTest1")
.transition()
.duration(duration)
.attr("d", d3.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); }))
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2.5)
.attr("marker-end", "url(#arrow)");
frame.selectAll(".lineTest2")
.data(data)
.join('circle')
.attr('class','lineTest2')
.attr('fill','red')
.transition()
.duration(duration)
.attr('cx',d => x(d.x))
.attr('r',3)
.attr('cy',d => y(d.y))
frame.selectAll(".lineTest3")
.data(data)
.join('path')
.attr('class','lineTest3')
.attr('stroke','gray')
.transition()
.duration(duration)
.attr('d',(d,i) => {
var ax = x(d.x)
var ay = y(d.y)
var bx = ax
var by = y(ymin)
var path = ['M',ax,ay,'L',bx,by]
return path.join(' ')
})
d3.select('.avline')
.attr('stroke','gray')
.transition()
.duration(duration)
.attr('x1',x(0))
.attr('y1',y(0))
.attr('x2',x(xmax))
.attr('y2',y(0))
xaxis.select("path")
.attr("marker-end", "url(#arrow)");
yaxis.select("path")
.attr("marker-end", "url(#arrow)");
}
update(data1)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>