Javascript 如何将 d3.svg.axis 限制为整数标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12643591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to limit d3.svg.axis to integer labels?
提问by Gajus
Is there any possibility to limit the number of d3.svg.axis integer labels displayed on the graph? Take for instance this graph. There are only 5 sizes here: [0, 1, 2, 3, 4]. However, the ticks are also displayed for .5, 1.5, 2.5and 3.5.
有没有可能限制图形上显示的 d3.svg.axis 整数标签的数量？以这张图为例。这里只有 5 种尺寸：[0, 1, 2, 3, 4]. 但是，也会显示.5, 1.5, 2.5和的刻度3.5。
回答by Bill
You should be able to use d3.formatinstead of writing your own format function for this.
您应该能够为此使用d3.format而不是编写自己的格式函数。
d3.svg.axis()
.tickFormat(d3.format("d"));
You can also use tickFormaton your scale which the axis will automatically use by default.
您还可以tickFormat在默认情况下轴将自动使用的比例尺上使用。
回答by Gajus
I've realised that it is enough to hide these values, rather than to completely exclude. This can be done using the tickFormat(https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format) as such:
我已经意识到隐藏这些值就足够了，而不是完全排除。这可以使用tickFormat(https://github.com/mbostock/d3/wiki/Formatting#wiki-d3_format)来完成：
d3.svg.axis()
.tickFormat(function(e){
if(Math.floor(e) != e)
{
return;
}
return e;
});
回答by Marcus Krahl
The use of d3.format("d")as tickFormat might not work in all scenarios (see this bug). On Windows Phone devices (and probably others) imprecise calculations may lead to situations where ticks are not correctly detected as integer numbers, i. e. a tick of "3" may be internally stored as 2.9999999999997 which for d3.format("d")is not an integer number.
使用d3.format("d")as tickFormat 可能不适用于所有场景（请参阅此错误）。在 Windows Phone 设备（可能还有其他设备）上，不精确的计算可能会导致不能正确地将刻度检测为整数的情况，即“3”的刻度可能在内部存储为 2.9999999999997，d3.format("d")它不是整数。
As a result the axis is not displayed at all. This behaviour especially becomes apparent in tick ranges up to 10.
结果根本不显示轴。这种行为在刻度范围高达 10 时尤为明显。
One possible solution is to tolerate the machine error by specifying an epsilon value. The values do not have to be exact integers this way, but may differ from the next integer up to the epsilon range (which should be way lower than your data error):
一种可能的解决方案是通过指定 epsilon 值来容忍机器错误。这种方式的值不必是精确的整数，但可能与下一个整数不同，直到 epsilon 范围（应该远低于您的数据错误）：
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;
}
Another solution, which is also mentioned in other threads, is to specify a fixed tick count and then round the ticks (which now should be "almost" integer) to the nearest integer. You need to know the maximum value of your data for this to work:
在其他线程中也提到的另一种解决方案是指定一个固定的滴答计数，然后将滴答数（现在应该是“几乎”整数）四舍五入到最接近的整数。您需要知道数据的最大值才能使其工作：
var axis = d3.svg.axis().ticks(dataMax).tickFormat(d3.format(".0f"))
