带对数刻度的 d3 js 箱线图

Question

我在这里指的是这个可重现的例子

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

但应用于以下数据集 (csv)

"Q1","Q2","Q3","Q4"
0.43,30,0.42,0.3
19,2,15,14
41,46,28,100
8,1,0.45,0.05
0.71,0.68,5,0.4
21,14,7,23
0.63,0.11,0.47,0.22
10,15,0.87,0.4
16,16,18,14
0.01,0.72,0.31,0.28

鉴于我想要带小数的数字，我一直在将原始代码更改为以下内容：

var v1 = Math.round(x.Q1*100)/100,
    v2 = Math.round(x.Q2*100)/100,
    v3 = Math.round(x.Q3*100)/100,
    v4 = Math.round(x.Q4*100)/100;

鉴于我想将 y 轴更改为对数刻度，我一直在将原始代码更改为以下内容：

// the y-axis
var y = d3.scale.log()
 .domain([0.001, 100])
 .range([height + margin.top, 0 + margin.top]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickValues([0.001, 0.01, 0.1, 1, 10, 100])

现在我的问题是盒子和胡须似乎没有正确地与 y 尺度对齐：例如，第一个四分位数、中位数、第三个四分位数等等的错误位置......；这可能是由于数据的日志转换？在绘制数据之前，我是否也需要转换数据本身？最终如何正确地做到这一切？

我还有第二个（显然是次要的）问题：如何旋转 x 轴的标签（QI、Q2、Q3、Q4）？

谢谢

Answer 1

关于旋转 x 轴标签（QI、Q2、Q3、Q4）的小问题，试试这个：

d3.selectAll('.x.axis .tick text')
    .attr('transform', 'rotate(-90)')
    .attr('text-anchor', 'end')
    .attr('dx', '-1em')
    .attr('dy', '-0.5em')

带对数刻度的 d3 js 箱线图

d3 js boxplot with log scale

logging

scale

boxplot

d3.js