旋轉座標軸時無法旋轉y軸刻度文本

Question

我正在嘗試沿圖表底部旋轉座標軸刻度。我可以旋轉x軸刻度，但是一旦我旋轉軸本身，那麼沿着底部的軸在技術上被認爲是y軸，我不能再旋轉刻度。

我想試條從左到右對面，我想沿着底部的蜱傾斜。

任何幫助，將不勝感激。

var day1 = new Date(); 
day1.setDate(day1.getDate() - 7); 
var day2 = new Date(); 
day2.setDate(day2.getDate() - 6); 
var day3 = new Date(); 
day3.setDate(day3.getDate() - 5); 
var day4 = new Date(); 
day4.setDate(day4.getDate() - 4); 
var day5 = new Date(); 
day5.setDate(day5.getDate() - 3); 



var chart = c3.generate({ 
    data: { 
     x: 'x', 
     columns: [ 
      ['x', day1, day2, day3, day4, day5], 
      ['data1', 30, 200, 100, 400, 150, 250] 
     ], 
     type: 'bar' 
    }, 
    axis: { 
     rotated: true, 
     x: { 
      type: 'timeseries', 
      tick: { 
       format: '%m-%d', 
       rotate: 75 
      } 
     }, 
     y: { 
      tick: { 
       rotate: 75 
      } 
     } 
    } 
}); 

Answer 1

嗯。您可能必須使用D3手動定位x-ticks。

喜歡的東西的例子。

var day1 = new Date(); 
 
day1.setDate(day1.getDate() - 7); 
 
var day2 = new Date(); 
 
day2.setDate(day2.getDate() - 6); 
 
var day3 = new Date(); 
 
day3.setDate(day3.getDate() - 5); 
 
var day4 = new Date(); 
 
day4.setDate(day4.getDate() - 4); 
 
var day5 = new Date(); 
 
day5.setDate(day5.getDate() - 3); 
 

 

 

 
var chart = c3.generate({ 
 
    data: { 
 
    x: 'x', 
 
    columns: [ 
 
     ['x', day1, day2, day3, day4, day5], 
 
     ['data1', 30, 200, 100, 400, 150, 250] 
 
    ], 
 
    type: 'bar' 
 
    }, 
 
    axis: { 
 
    rotated: true, 
 
    x: { 
 
     type: 'timeseries', 
 
     tick: { 
 
     format: '%m-%d', 
 
     rotate: 75 
 
     } 
 
    }, 
 
    y: { 
 
     tick: { 
 
     rotate: 75 
 
     } 
 
    } 
 
    } 
 
}); 
 

 
$("button").click(function(){ 
 
    d3.selectAll(".c3-axis-y text").attr("transform", "rotate(75)").attr("y", -1).attr("x", 0).style("text-anchor", "start").style("display", "block"); 
 
    d3.selectAll(".c3-axis-y tspan").attr("x", 0).attr("dy", ".71em").attr("dx", 7.72) 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<button>Reposition</button> 
 
<div id='chart' />