D3: Bar Chart x-axis alignment and tooltip

1

I’m having problems aligning the bars with the x-axis ticks. It seems like ever other tick is aligned properly,

Here is my project

Here’s the JSON request:

req.onload=function(){
    let data = JSON.parse(req.responseText).data.map(e=>{
      return {
        gdp: e[1],
        date: new Date(Date.parse(e[0])),
        dateString: e[0],
        dateInt: Date.parse(e[0])
      };
    });

This is the x scale I’m using:

const xScale = d3.scaleLinear()
    .domain(
      [
        d3.min(data, d=>d.dateInt), 
        d3.max(data, d=>d.dateInt)
      ]
    )
    .range([padding, width-padding]);

The x attribute declaration is .attr('x', (d,i)=>xScale(d.dateInt))

and finally the code segment for the axes declaration:

var xAxis = d3.axisBottom(xScale);
    xAxis.ticks(15);
    xAxis.tickFormat(d3.timeFormat("%Y"));

the width is the width of the entire svg element, and padding is the amount of padding around the actual graph area.

And here is the g element wrapping the axis:

svg.append('g')
    .attr('transform', `translate(0, ${height-padding})`)
    .attr('id', 'x-axis')
    .call(xAxis);

Also, the tooltips are not being recognized as even existing (the first of the tooltips test fails, but the tooltips themselves are showing fine). I appended them to the bars with the following:

.append('title')
    .attr('id', 'tooltip')
    .attr('class', 'tooltip')
    .text(d=>`${d3.timeFormat('%B %d, %Y')(d.dateInt)}\n$${d.gdp}`)

Any help would be greatly appreciated!

PS, In case it’s relevant, which I don’t think it is because the x position for the rects are defined explicitly, but the width of the bars is defined as const barWidth = (width-2*padding)/data.length;

2

So after a week of playing around with the number of tick marks and the axis alignment, I finally found the solution to this, and I figured I’d post it in case anyone else runs into a similar problem. I had to use scaleTime rather than scaleLinear

2 Likes