Duplicated values in scaleBand
maximys963 opened this issue · comments
Hello,
I'm trying to display 36 hours array
labels = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00", "19:00", "20:00", "21:00", "22:00", "23:00", "00:00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]
with data
data = [16.1, 15.55, 14.12, 11.81, 9.637, 8.022, 6.625, 5.105, 5.216, 8.398, 11.4, 10.86, 10.52, 11.14, 15.37, 13.26, 11.33, 8.572, 12.21, 16.98, 12.43, 10.4, 10.09, 10.19, 9.361, 9.068, 9.763, 12.06, 15.52, 17.32, 15.53, 14.46, 14.05, 24.24, 12.26, 11.01]
xScale looks like:
const xScale = d3.scaleBand() .range([ 0, chartWidth ]) .domain(labels) .paddingInner(innerPadding);
but displayed only 24 elements from 1:00 to 00:00. 😓 😓 😓
Does any ways to configure scaleBand without override duplicated labels data ?
Ordinal, band, and point scales use strings to identify data points, so you have to pass in unique string for each unique value. You can then change the tick format of the axis to control how it is displayed (for example to only show hours). For dates this is often done using date objects or milliseconds as the domain values and a d3.timeFormat instance.