简体   繁体   English

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

[英]dc.js x-axis displaying as decimal rather than whole number

I have a line chart that is the week number on the a-xis and the capacity on the y-axis.我有一个折线图,它是轴上的周数和 y 轴上的容量。 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但是,由于某种原因,x 轴的间隔增加了 0.5 ......我希望它从 1、2、3、4 等变为 go 等。而不是 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?我需要做什么来确保我的 x 轴间隔符合我的数据集中的值? I have tried to do capacityChart.xAxis().tickFormat(d3.format('.0f'));我试图做capacityChart.xAxis().tickFormat(d3.format('.0f')); but that let to the x-axis being 1, 1, 2, 2, 3, 3, 4, 4, 5, 5..但这让 x 轴为 1, 1, 2, 2, 3, 3, 4, 4, 5, 5..

在此处输入图像描述

Any help will be greatly appreciated!任何帮助将不胜感激!

Managed to figure to out thanks to Gordon!感谢戈登,设法弄清楚了!

I did capacityChart.xAxis().ticks(maxWeek) to fix the issue我做了capacityChart.xAxis().ticks(maxWeek)来解决这个问题

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM