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

Question

按照提供的示例，我构建了一个函数，该函数将箱形图绘制到 jQuery 手风琴选项卡上，该选项卡具有一定的固定高度和宽度。不同类别的数量因输入数据而异。目前我想在绘图中实现以下目标：

1）添加轴和显示标签，就像这张图片

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

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

Answer 1

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

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

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

最好的，延斯

Answer 2

目前我正在使用在 Highcharts 论坛（此处为 jsfiddle ）中找到的 hack。还有一个用 Raphael.js 制作的箱线图实现，看起来很酷（github，示例）