Giters

d3 / d3-axis

Human-readable reference marks for scales.

Home Page:https://d3js.org/d3-axis

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Ticks misalignment

bedwardvedicci opened this issue · comments

commented

I have noticed that the ticks do not seem to be well aligned in the axis, and i think it is a bug in the newer version of d3, because the ticks seem to be well aligned in d3 version 3.5.17.

To illustrate the issue, i tried to show the difference in those two "pens" :
d3 version 3.5.17: https://codepen.io/BedwardVedicci/pen/LYbjmwR // comments are in the "JS Window" of the pen
d3 version 6.5.0: https://codepen.io/BedwardVedicci/pen/poNrVBG // comments are in the "JS Window" of the pen

Changes made from "3.5.17" to "6.5.0" are as follows :

  • Changed "scale.linear()" To "scaleLinear()"
  • Changed "scale.threshold()" To "scaleThreshold()"
  • Changed ".svg.axis().scale(legendX).orient('bottom')" To ".axisBottom(legendX)"

Note: The misalignment may not seem obvious from first glance, but there is, you can be sure of that if you check the "x" attribute.

commented

This is described in the 1.0 release notes:

https://github.com/d3/d3-axis/releases/tag/v1.0.0

The default appearance has been changed slightly to offset the axis by a half-pixel; this fixes a crisp-edges rendering issue on Safari where the axis would be drawn two-pixels thick.

commented

But isn't this implementation affecting the accuracy of the axis? for example in the Map's legend, the offset applied on the ticks make the legend look inaccurate and makes the layout look a little bit "ugly".

So is there a way to remove the offset from the ticks?