Ranges with one number and one string generate axis ticks with invalid translations

[ajoslin103]

Not that I was doing this on purpose...

// dynamically determine the stylistic width of the graph, then strip the 'px' 
let width =String(this.graph.attr('width') || this.graph.style('width')).replace('px', '');
let height = String(this.graph.attr('height') || this.graph.style('height')).replace('px', '');

let xExtent = d3.extent(this.getTimeData()); // a series of millisecond times
let xScale = d3.scaleTime().domain(xExtent).range([0, width]);
let xAxis = d3.axisBottom(xScale);

d3.select('lines').append("svg").append("g").call(xAxis);

resulted in erroneous translations such as: transform="translate(20.8287963768115960.5,0)"
(notice the two decimal points in the x value)

the fix

let width = Number(String(this.graph.attr('width') || this.graph.style('width')).replace('px', ''));
let height = Number(String(this.graph.attr('height') || this.graph.style('height')).replace('px', ''));

[mbostock]

This is the correct behavior for d3-scale, as a time scale makes no assumption that its range is numbers; however, it is the incorrect behavior for d3-axis, which should coerce the value returned by the scale to a number when setting the transform attribute.

[mbostock]

(Of course, fixing this in d3-axis will mask the bug in your code; I recommend coercing your width and height to numbers rather than leaving them as strings.)

[ajoslin103]

wow, you're fast! yes, I have applied that fix!

is there a better way to get the size of the graph dynamically?

and: cool! you can just prefix with a '+' !!

[mbostock]

Possibly element.getBoundingClientRect.