了解d3.js Box Plot示例（Tickformat＆Positioning）

Question

我仍在学习d3.js，现在我正在尝试从d3网站实施稍微修改过的Box Plot示例：

http://bl.ocks.org/mbostock/4061502

我struggeling了解如何box.js的这一特定部分正在工作：

// Compute the tick format. 
    var format = tickFormat || x1.tickFormat(8); 

... 

boxTick.enter().text(format); 

首先，这是为什么工作？据我了解，格式只是包含一个函数，d3如何知道要放置整数呢？

此外，我试图改变格式，因为在这个例子中值只显示为整数，但我有浮动。我通过API挖，发现这个：

https://github.com/mbostock/d3/wiki/Formatting#d3_format

所以，我试图用

x1.tickFormat(d3.format(".3r")) 

但它不工作。它现在只显示完整（并且非常长）的浮动数字。

到目前为止我还不能弄清楚的最后一件事情是，箱子的尺寸，位置和间距是如何计算的？

谢谢你的时间，我希望这些问题不是太基本！

Answer 1

我只是通过这种混淆而战，认为我现在明白了一点。要回答您的具体问题，您可以使用

var format = tickFormat || d3.format(".3r"); 

手动指定所需的格式。

至于什么tickFormat()实际上是在做，这是我最好的猜测：

tickFormat调用函数d3_scale_linearTickFormat()内部，它被定义here。我对该函数的解释是，参数是轴上的（假设的）数量的嘀嗒声，并且返回值是一个格式函数，它将四舍五入到合理的小数位数。

在示例情况下（x1.tickFormat(8)），您请求8个刻度。我相信范围取自盒子图中的值，在这个例子中大约为600到1000，所以在一组8个滴答之间的步长大约为50.结果，将滴答值舍入到最接近的整数是一种明智的格式，这就是所做的。

如果您改为使用x1.tickFormat(100000)（试试），则您需要在400范围内请求100000个刻度，所以刻度之间的步距约为0.004。因此，d3决定小数点后3点是显示单个滴答的合理数字（因为如果四舍五入为整数，许多相邻滴答的格式将相同）。当然，在几乎任何情况下，100000都是荒谬的数字，但它清楚了发生了什么。

为了让事情更加令人困惑，可以使用格式字符串作为第二个参数调用该函数，如x1.tickFormat(8, ",.3r")，在这种情况下，它似乎基本上忽略了第一个参数，并使用指定的格式字符串。