理解d3.js框图示例(Tickformat & Positioning)

Question

我仍然在学习d3.js，现在我正在尝试从d3网站上实现一个经过稍微修改的Box绘图示例：

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

我正在努力理解box.js的这个特定部分是如何工作的：

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

...

boxTick.enter().text(format);

首先，为什么要这样做？据我所知，格式只是一个函数，d3如何知道如何放置整数呢？

此外，我试图更改格式，因为在示例中，值只显示为整数，但我有浮点数。我仔细研究了API，发现了以下内容：

格式化

所以我试着用

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

但这不管用。它现在只显示完整的(非常长的)浮点数。

到目前为止，我还没有搞清楚的最后一件事是，如何计算这些盒子的大小、位置和间距？

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

Answer 1

我只是克服了同样的困惑，并认为我现在更了解一些事情。要回答你的具体问题，你可以用

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

若要手动指定所需格式，请执行以下操作。

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

tickFormat在内部调用函数d3_scale_linearTickFormat()，该函数被定义为这里。我对这个函数的解释是，这个参数是轴上的(假设的)滴答数，而返回值是一个格式函数，它可以舍入一个合理的小数位数。

在示例(x1.tickFormat(8))中，您请求8条滴答。我相信这个范围是从盒子图中的值中提取出来的，在这个例子中大约是600到1000，所以一组8条蜱之间的步长大约是50。因此，将勾选值舍入最近的整数是一种合理的格式，这就是所做的工作。

如果您使用x1.tickFormat(100000) (尝试一下)，您将请求在400范围内执行100000次滴答操作，因此滴答之间的间隔约为0.004次。因此，d3决定小数点之后的3点对于单个滴答来说是一个合理的数字(因为如果它四舍五入到整数，许多相邻的滴答将被相同的格式格式化)。当然，在几乎任何情况下，100000是一个荒谬的数量，但它澄清了正在发生的事情。

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