positioning xAxis and yAxis with d3.js - d3.js

Question

What I have works but I am wondering if there is a better way.
I have this page as my working example. The source code is here and this question deals specifically drawing x axis and y axis with positive and negative values.
I have a drawAxes method that looks like this:
drawAxes(data) {
const xAxis = d3.svg.axis()
.scale(this.xScale);
const yAxis = d3.svg.axis()
.orient('left')
.scale(this.yScale);
const dimensions = this.getDimensions();
this.xScale.domain(d3.extent(data, (d) => d.x));
const minY = d3.min(data, (d) => d.y);
const maxY = d3.max(data, (d) => d.y);
const nonNegativeXAxis = minY >= 0 && maxY >= 0;
const positiveAndNegativeXAxis = minY < 0 && maxY > 0;
let yScaleDomain, xAxisPosition;
if(nonNegativeXAxis) {
yScaleDomain = [0, d3.max(data, (d) => d.y)];
} else {
yScaleDomain = d3.extent(data, (d) => d.y);
}
this.yScale.domain(yScaleDomain);
const findZeroTick = (data) => {
return data === 0;
};
this.svg.append('g')
.attr('class', 'axis y-axis')
.style('visibility', 'hidden')
.call(yAxis);
if(nonNegativeXAxis) {
yScaleDomain = [0, d3.max(data, (d) => d.y)];
xAxisPosition = dimensions.height;
} else if(positiveAndNegativeXAxis) {
xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
});
} else {
yScaleDomain = d3.extent(data, (d) => d.y);
xAxisPosition = 0;
}
this.svg.append('g')
.attr('class', 'axis x-axis')
.attr('transform', `translate(0, ${xAxisPosition})`)
.call(xAxis);
d3.select('.y-axis').remove();
const minX = d3.min(data, (d) => d.x);
const maxX = d3.max(data, (d) => d.y);
const positiveXOnly = minX > 0 && maxX > 0;
const negativeXOnly = minX < 0 && maxX < 0;
let yAxisPosition;
if(positiveXOnly) {
yAxisPosition = 0;
} else if(negativeXOnly) {
yAxisPosition = dimensions.width;
} else {
yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
});
}
this.svg.append('g')
.attr('class', 'axis y-axis')
.attr('transform', `translate(${yAxisPosition}, 0)`)
.call(yAxis);
}
WHat I found great difficulty in was positioning the y axis x axis at 0 on the opposite axis.
How I did this was to first of all draw the y axis but keep it hidden:
this.svg.append('g')
.attr('class', 'axis y-axis')
.style('visibility', 'hidden')
.call(yAxis);
I then found the position of 0 on the y axis by selecting all the ticks and finding the y coordinate of the 0 tick, I use this value to position the x axis:
const findZeroTick = (data) => {
return data === 0;
};
xAxisPosition = this.svg.selectAll(".tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[1];
});
this.svg.append('g')
.attr('class', 'axis x-axis')
.attr('transform', `translate(0, ${xAxisPosition})`)
.call(xAxis);
To position the yAxis, I first of all remove the yAxis and then do a similar calculation by selecting all the ticks on the x-axis and then adding the yAxis again with and using the retrieved value to position the yAxis:
d3.select('.y-axis').remove();
yAxisPosition = this.svg.selectAll(".x-axis .tick").filter(findZeroTick).map((tick) => {
return d3.transform(d3.select(tick[0]).attr('transform')).translate[0];
});
this.svg.append('g')
.attr('class', 'axis y-axis')
.attr('transform', `translate(${yAxisPosition}, 0)`)
.call(yAxis);
Is there a more efficient way of achieving the same result or failing that, can I move the axis without having to remove it and re-add it?

Answer 1

As soon as your linear scale has a domain and a range you can use it to get the pixel value of any domain value. For example, to get the pixel of point (0 , 0) you would ask xScale(0) and yScale(0).
If these values lie outside the defined range (read: svg canvas dimensions in pixels), you know that the Y-axis should be on the far left or right respectively (min or max range plus margin).