Hi, I’ve a general question about how scales work. Let’s say we have this scale:
myScale = d3.scaleLinear()
myScale(556) = 2.2239999.... I’m wondering how decimal pixels are managed under the hood, since pixels should be integers on the screen.
Thank you @Fil. I’m perfectly fine with
scaleLinear. I’m just curios about how decimal values in the range are mapped to screen pixels, since they are finite and non-fractional. A very low-level question.
The linear scale returns numbers, not pixels.
Of course in many applications, that number is used to define pixel positions, for example by setting an attribute on the DOM, maybe for a svg circle like so:
In that case, if scale(value) has returned a number such as 123.45678901, that number is passed as-is to the DOM, resulting in a circle with a cx attribute equal to “123.45678901”.
And then it is the browser that colors the pixels with that information, using anti-aliasing if the values do not exactly match pixels.
Not sure if this helps to clarify
Yes, it helps a lot. I was puzzled by the mapping to physical pixels. Scales just pass down values to svg, the rest is browser / OS “magic”.
For those interested, see also: Pixel-fitting