CODEWITHSUNDEEP
javascriptd3.jssvgdata-visualization
Daniel Vaughn
Daniel Vaughn

Reputation: 73

D3 v4 date ticks never display last item

I'm using D3 v4 to build a very simple chart. I'm using a time scale for the x axis. I know that D3 maintains control over the number of ticks shown, when using a time scale. But that doesn't seem to explain the behavior here.

The codepen (linked below) shows an RTC of the behavior. I have 5 dates, defined very simply as 2018-10-10, 2018-10-11, and so on. I'm using d3.scaleTime() and d3.axisBottom(), nothing fancy.

No matter what I do, the last date is never included in the tick marks. Why is this happening?

Here's a link to the codepen

Upvotes: 0

Views: 615

Answers (1)

Rupesh
Rupesh

Reputation: 61

There are certain challenges while using timescale in d3. Here is the working code. You can update the tick format and height/width accordingly-

var svg = d3.select('#graph')
  .attr('width', '400px')
  .attr('height', '200px')

var data = [
  new Date('2018-10-10'),
  new Date('2018-10-11'),
  new Date('2018-10-12'),
  new Date('2018-10-13'),
  new Date('2018-10-14')
]

var x = d3.scaleTime().range([50, 350])

x.domain(d3.extent(data))

svg.append('g')
  .attr('class', 'x-axis')
  .call(d3.axisBottom(x) .tickValues(data.map(function(d){return d}))
                .tickFormat(d3.timeFormat("%Y-%m-%d")));

Upvotes: 2

Related Questions