微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

dc.js x 轴显示为小数而不是整数

如何解决dc.js x 轴显示为小数而不是整数

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

enter image description here

这是我的代码供参考

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: "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,3,4,5,5..

enter image description here

任何帮助将不胜感激!

解决方法

多亏了戈登,终于搞明白了!

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。