带有标签和轴的箱形图,适用于具有固定尺寸的div

时间:2012-09-18 19:36:49

标签: svg d3.js boxplot

provided example之后,我构建了一个函数,用于绘制一个jQuery手风琴选项卡的框图,该选项卡具有一定的固定高度和宽度。宽度。不同类别的数量根据传入的数据而有很大差异。目前我想在绘图中实现以下目标:

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

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

问题是这两者如何实施?我甚至无法找到一种方法来可靠地减少盒子之间的填充而不会吃掉盒子上的侧面数字。

2 个答案:

答案 0 :(得分:3)

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

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

在Mike的实现中,不是使用单独的svg元素,而是在一个根元素中渲染所有的boxmap。这样可以轻松添加轴。

最佳, 延

答案 1 :(得分:1)

暂时我正在使用Highcharts论坛(jsfiddle here)中发现的黑客攻击。 Raphael.js也有一个看起来很酷的盒子图实现(githubexample