带有对数刻度的d3 js箱线图答案

【问题标题】：d3 js boxplot with log scale带有对数刻度的d3 js箱线图
【发布时间】：2019-03-03 01:12:02
【问题描述】：

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

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])

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

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

谢谢

【问题讨论】：

您应该能够选择您的 xAxis 刻度文本并应用如下变换：d3.selectAll('.x.axis text').attr('transform', 'rotate(-90)')。 stackoverflow.com/questions/11252753/rotate-x-axis-text-in-d3
谢谢，它以某种方式工作......但它在某处旋转（？）也是 x 轴标题，作为一个不需要的结果......

标签： d3.js logging scale boxplot

【解决方案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')

【讨论】：