我想要一个根据数据大小自动缩放 x 轴并仅显示特定数字的图表,对于其余数据点,仅显示没有数字的刻度线。像这样:
在此示例中,数据的长度介于 75 和 155 之间,因此它显示的是 20 的倍数。然后对于每个间隔,有 5 条等距刻度线。
到目前为止,我已经能够使用此处建议的 cleanAxis 函数编辑刻度:How do you reduce the number of Y-axis ticks in dimple.js? .我做了这样的事情来缩放轴:
if (data.length < 10) {
cleanAxis(myAxis, 2);
}
if (data.length >= 10 && data.length < 75) {
cleanAxis(myAxis, 10);
}
if (data.length >= 75 && data.length < 155) {
cleanAxis(myAxis, 20);
}
if (data.length >= 155) {
cleanAxis(myAxis, 50);
}
这显示了我想要的数字,但也删除了刻度线。是否可以在 dimple.js 中做我想做的事?
最佳答案
作为引用,这里是 cleanTicks 函数,由@JohnKiernander 提供。
// Pass in an axis object and an interval.
var cleanAxis = function (axis, oneInEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// Leave the first label
var del = 0;
// If there is an interval set
if (oneInEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text").each(function (d) {
// Remove all but the nth label
if (del % oneInEvery !== 0) {
this.remove();
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
del += 1;
});
}
}
};
去掉线条的部分在这里:
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
因此,如果您希望它不那么频繁地被删除,您可以再做一次模数检查:
var cleanAxis = function (axis, labelEvery, tickEvery) {
// This should have been called after draw, otherwise do nothing
if (axis.shapes.length > 0) {
// If there is an interval set
if (labelEvery > 1) {
// Operate on all the axis text
axis.shapes.selectAll("text").each(function (d, i) {
// Remove all but the nth label
if (i % labelEvery !== 0) {
this.remove();
}
if (i % tickEvery !== 0) {
// Find the corresponding tick line and remove
axis.shapes.selectAll("line").each(function (d2) {
if (d === d2) {
this.remove();
}
});
}
});
}
}
};
关于javascript - dimple.js 中的自动缩放和格式化 x 轴,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25187816/