代码之家  ›  专栏  ›  技术社区  ›  maxbre

d3 js对数比例箱线图

  •  1
  • maxbre  · 技术社区  · 7 年前

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

    这可能是因为数据的日志转换吗? 最终如何正确地做到这一切?

    我还有第二个(显然是次要的)问题:如何旋转x轴的标签(QI,Q2,Q3,Q4)?

    谢谢您

    1 回复  |  直到 7 年前
        1
  •  0
  •   ksav    7 年前

    至于旋转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')