dc.js x 轴显示为小数而不是整数
dc.js x-axis displaying as decimal rather than whole number
我有一个折线图,a 轴是周数,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..
任何帮助将不胜感激!
多亏了 Gordon,设法弄明白了!
我capacityChart.xAxis().ticks(maxWeek)
解决了这个问题
我有一个折线图,a 轴是周数,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..
任何帮助将不胜感激!
多亏了 Gordon,设法弄明白了!
我capacityChart.xAxis().ticks(maxWeek)
解决了这个问题