svg - 带有标签和轴的箱线图，适合具有固定尺寸的 div

Question

关注 provided example我构建了一个函数，将箱形图绘制到 jQuery Accordion 选项卡上，该选项卡具有一定的固定高度和宽度。不同类别的数量因输入数据而异。目前我想在绘图中实现以下目标:

1) 添加轴和显示标签，like in this picture

2) 始终使盒子适合容器的宽度和高度。目前我看到如果类别太多，其中一些在第二行结束，确保它们没有被完全看到。在图片中，div 包含 7 个框，但一行中只有 4 个:


问题是这两个如何实现？我什至想不出一种方法来可靠地减少盒子之间的填充而不吃到盒子上的边号。

Answer 1

我采用了原始的 d3.js 示例来包含轴:

http://bl.ocks.org/jensgrubert/7789216

不像 Mike 的实现那样使用单独的 svg 元素，这里所有的箱线图都在一个根元素中呈现。这使得添加轴变得容易。

最好的，
延斯