javascript - dc.js x-axis displaying as decimal rather than whole number

Question

I have a line chart that is the week number on the a-xis and the capacity on the y-axis. However, for some reason the interval for the x-axis is going by 0.5... I want it to go from 1, 2, 3, 4, etc.. rather than 1, 1.5, 2, 2.5, 3, 3.5, etc

Here is my code for reference

let chart = dc.lineChart("#chart");
let ndx = crossfilter(results);
            
let weekDimension = ndx.dimension(function (d) {
     return d.week = +d.week;
});
                
function reduceAdd(p, v) {
    ++p.count;
    p.total += v.capacity;
    p.average = p.total / p.count;
    return p;
}

function reduceRemove(p, v) {
    --p.count;
    p.total -= v.capacity;
    p.average = p.count ? p.total / p.count : 0;
    return p;
}

function reduceInitial() {
    return { count: 0, total: 0, average: 0 };
} 

let capacityGroup = weekDimension.group().reduce(reduceAdd, reduceRemove, reduceInitial);
            
chart.width(360)
    .height(200)
    .margins({ top: 20, right: 20, bottom: 50, left: 30 })
    .mouseZoomable(false)
    .x(d3.scale.linear().domain([1, 52]))
    .renderHorizontalGridLines(true)
    .brushOn(false)
    .dimension(weekDimension)
    .valueAccessor(function (d) {
        return d.value.average;
    })
    .group(capacityGroup);

dc.renderAll('chart');

This is how results would look like

{month : "1", capacity: "48"}
{month : "1", capacity: "60"}
{month : "2", capacity: "67"}
{month : "2", capacity: "60"}
{month : "2", capacity: "66"}
{month : "3", capacity: "52"}
{month : "3", capacity: "63"}
{month : "4", capacity: "67"}
{month : "4", capacity: "80"}
{month : "5", capacity: "61"}
{month : "5", capacity: "66"}
{month : "5", capacity: "54"}

What do I need to do to ensure my x-axis interval is going by the values in my dataset? I have tried to do capacityChart.xAxis().tickFormat(d3.format('.0f')); but that let to the x-axis being 1, 1, 2, 2, 3, 3, 4, 4, 5, 5..

Any help will be greatly appreciated!

question from:https://stackoverflow.com/questions/66053376/dc-js-x-axis-displaying-as-decimal-rather-than-whole-number

Answer 1

Managed to figure to out thanks to Gordon!

I did capacityChart.xAxis().ticks(maxWeek) to fix the issue