Question

我仍然在学习d3.js，现在我正试图在d3网站上实现Box Plot示例的略微修改版本：

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

我很想知道box.js的这个特殊部分是如何工作的：

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

...

boxTick.enter().text(format);

首先，为什么这有效？据我所知， 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个刻度。我相信范围取自boxplot中的值，在示例中大约为600到1000，因此一组8个tick之间的步长大约为50.因此，将tick值四舍五入为最接近的整数是一种明智的形式，这就是所做的。

如果您改为使用x1.tickFormat(100000)（尝试一下），则需要在400范围内请求100000个刻度，因此刻度之间的步长大约为0.004。因此，d3决定小数点后的3个点是一个合理的数字来显示单个节拍（因为如果它舍入到整数，则许多相邻的节拍将被格式化相同）。当然，几乎在任何情况下，100000都是一个荒谬的滴答声，但它澄清了正在发生的事情。

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

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

1 个答案: