How to make X axis timescale with equal interval between elements on chart independent of time range

Question

I need to display elements on my chart with equal interval between elements with dates ticks on X axis. Elements have different interval because they have scaled by date range. Is it possible to display some elements on chart with equal interval between them regardless of dates on X axis?

I have tried to use different scales like bandscale and linearscale. But they works incorrect when i am trying to pass my min and max dates to domain function.

For example this chart: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Charts/Overview/jQuery/Light/

I need the same equal distance between dots but have dates on my X axis instead of names.

Answer 1

Since it is more important to have the bars equally spaced than to have them spaced according to their time value, use d3.scaleBand() and pass to the domain the full array of dates that are represented in the dataset, e.g., .domain(data.map(d => d.date)).