dc.js x 轴显示为十进制而不是整数答案

【问题标题】：dc.js x-axis displaying as decimal rather than whole numberdc.js x 轴显示为十进制而不是整数
【发布时间】：2021-05-09 05:03:45
【问题描述】：

我有一个折线图，它是轴上的周数和 y 轴上的容量。但是，由于某种原因，x 轴的间隔是 0.5 ......我希望它从 1、2、3、4 等......而不是 1、1.5、2、2.5、3、3.5，等等

这是我的参考代码

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');

这就是结果的样子

{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"}

我需要做些什么来确保我的 x 轴间隔符合我的数据集中的值？我曾尝试做capacityChart.xAxis().tickFormat(d3.format('.0f'));，但这让 x 轴为 1、1、2、2、3、3、4、4、5、5..

任何帮助将不胜感激！

【问题讨论】：

嗨，我很高兴能帮助回答这个问题，但是 dc.js 轴直接来自 D3，因此如果没有 dc.js 标签来搜索这个特定问题，您可能会更幸运。或者查看d3-axis documentation 通常就足够了。
我明白了，你会建议我尝试在没有 dc 标签的情况下问另一个问题吗？我确实尝试过tickFormat，但这导致我的图表创建重复项..是因为我的x轴只有5个值吗？我以前没有这个问题..
没问题，有时间我会回答的。我正在休假，所以可能需要几天时间。我的观点是：如果您搜索答案但没有找到任何东西，可能是因为这不是专门的 [dc.js] 问题。你可以试试.ticks()，它会影响滴答数。
明白了！我也会尝试做 .ticks() 。感谢您的帮助！
或.tickValues() - 我认为没有办法控制如何选择刻度 - 您可以指定一个近似数字，也可以指定确切的刻度。

标签： javascript d3.js dc.js linegraph

【解决方案1】：

感谢戈登！

我用capacityChart.xAxis().ticks(maxWeek) 解决了这个问题

【讨论】：