javascript - 了解 d3.js 箱线图示例(刻度格式和定位)

Question

我仍在学习 d3.js，现在我正在尝试实现 d3 网站上的箱线图示例的稍微修改版本:

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

我很难理解 box.js 的这个特定部分是如何工作的:

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

...

boxTick.enter().text(format);

首先，为什么会这样？据我了解，format只是包含一个函数，d3如何知道要放置整数？

此外，我尝试更改格式，因为在示例中，值仅显示为整数，但我有 float 。我深入研究了 API 并发现了这个:

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

所以，我尝试使用

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

但是它不起作用。它现在只显示完整的(而且很长) float 。

到目前为止我无法弄清楚的最后一件事是，盒子的大小、位置和间距是如何计算的？

感谢您抽出宝贵的时间，我希望这些问题不是太基础!

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")，在这种情况下，它似乎基本上忽略第一个参数并仅使用指定的格式字符串。