[英]autoscale and format x axis in dimple.js
我想要一个根据数据大小自动缩放x轴并仅显示特定数字的图表,而其余数据点仅显示没有数字的刻度线。 像这样的东西:
在此示例中,数据的长度在75和155之间,因此它显示20的数字倍数。然后,对于每个间隔,有5个等间距的刻度线。
到目前为止,我已经能够使用此处建议的cleanAxis函数编辑刻度: 如何减少dimple.js中Y轴刻度的数量? 。 为缩放轴做了类似的事情:
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();
}
});
}
});
}
}
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.