d3 chart is showing some decimal value in the X axis tick, instead of showing the date and time

Question

My d3 timeline chart is showing some junk value (decimal) in the x-axis tick, instead of showing the date and time.

This only happens when there is a single data in the graph.

As shown in the diagram below.

code sandbox - https://codesandbox.io/s/exciting-clarke-yfd1e

I found the root cause of this, It is happening because of the initial call on the chart load . I am doing a zoom transform on the chart load. If I remove this line it works as expected but I can't remove as this is required (Initial zoom transform to apply on default chart load - d3.zoomIdentity ).

Code creating the issue is below -

var transform = d3.zoomIdentity.translate(200, 0).scale(0.5);
svg.call(zoom.transform, transform); //This is initial call on chart load

Please suggest to me how to fix this issue in the d3 chart.

Thanks in advance.

Answer 1

This seems to be an issue with the scale, so when there is only one data the default behavior is considering it as a date but after transforming it's considered as a number and the junk value is coming as last 3 digits of the number ie, in your case startTime: "1574504520049" is .049

So if you update the scale to somewhere near that you will be able to get time as

d3.zoomIdentity.translate(100, 50).scale(0.0000000001)

Please check https://github.com/d3/d3-zoom/issues/57

it will help you find a proper scale for the problem.