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箱线图

1 个答案: