Javascript 如何将d3.svg.axis限制为整数标签?
是否有可能限制图形上显示的d3.svg.axis整数标签的数量?以这个图表为例。这里只有5种尺寸:Javascript 如何将d3.svg.axis限制为整数标签?,javascript,d3.js,axis,labels,axis-labels,Javascript,D3.js,Axis,Labels,Axis Labels,是否有可能限制图形上显示的d3.svg.axis整数标签的数量?以这个图表为例。这里只有5种尺寸:[0、1、2、3、4]。但是,0.5、1.5、2.5和3.5也会显示刻度 我意识到,隐藏这些值就足够了,而不是完全排除这些值。这可以使用tickFormat(https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_格式),因此: 您应该能够使用d3.format,而不是为此编写自己的格式函数 d3.svg.axis() .tickForm
[0、1、2、3、4]
。但是,0.5、1.5、2.5和3.5也会显示刻度
我意识到,隐藏这些值就足够了,而不是完全排除这些值。这可以使用tickFormat
(https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_格式),因此:
您应该能够使用d3.format
,而不是为此编写自己的格式函数
d3.svg.axis()
.tickFormat(d3.format("d"));
您也可以在您的刻度上使用tickFormat
,默认情况下,轴将自动使用该刻度。使用d3.format(“d”)
作为tickFormat可能不会在所有情况下都起作用()。在Windows Phone设备(可能还有其他设备)上,不精确的计算可能会导致不正确地将刻度检测为整数的情况,即。E“3”的勾号可以在内部存储为2.999999997,这对于d3。格式(“d”)
不是整数
因此,根本不显示轴。这种行为在10个蜱虫范围内尤为明显
一种可能的解决方案是通过指定ε值来容忍机器错误。通过这种方式,值不必是精确整数,但可能与下一个整数不同,直到epsilon范围(该范围应远低于您的数据错误):
其他线程中也提到了另一种解决方案,即指定固定的记号计数,然后将记号(现在应该是“几乎”的整数)四舍五入到最接近的整数。您需要知道数据的最大值,才能使其正常工作:
var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))
有用。有没有办法让它也去掉记号?格式隐藏了半个数字,但保留了半个记号。@IBBoard请尝试以下操作:axis.ticks(tickCountSetter(yMax))
其中yMax是一些数字,使用此函数:函数tickCountSetter(n){if(n@IBBoard请参阅注释中的正确解决方案:这可能会导致记号剩余,但标签为空(至少在v5中)在我的情况下,这比公认的答案要好。对于一个小数据集,我的轴显示[0,0.5,1,1.5,2,2.5,3]
。对于d3.format(d)
,它会变成[0,1,1,2,2,3,3]
,这毫无意义。
var epsilon = Math.pow(10,-7);
var axis = d3.svg.axis().tickFormat(function(d) {
if (((d - Math.floor(d)) > epsilon) && ((Math.ceil(d) -d) > epsilon))
return;
return d;
}
var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))