c3條形圖將刻度值與非居中刻度對齊

Question

我試圖將x類軸上的值置於酒吧的兩側，而不是居中。顯然有可能把蜱滴在那裏，但是蜱的值也可以下降嗎？

var chart; 
 
chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data', 30, 200, 100, 400, 150, 250] 
 
     ], 
 
     type: 'bar' 
 
    }, 
 
    bar: { 
 
     width: { 
 
      ratio: 0.98 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
     type: 'category', 
 
     categories: [10, 50, 100, 500, 2000, 5000], 
 
     tick: { 
 
      centered: false 
 
     } 
 
     } 
 
    }, 
 
    legend: { 
 
     show: false 
 
    } 
 
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>

Answer 1

這不是最漂亮的答案，最後一個標籤被砍斷（你必須調查C3的填充選項），但是這兩條線後，你已經呈現的圖表做訣竅：

// use c3's internal x scale to get the width of one bar 
    var width = chart.internal.x(1) - chart.internal.x(0); 
    // shuffle all the tick label tspans along by half a bar's width 
    d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2); 

var chart; 
 
chart = c3.generate({ 
 
    data: { 
 
     columns: [ 
 
      ['data', 30, 200, 100, 400, 150, 250] 
 
     ], 
 
     type: 'bar' 
 
    }, 
 
    bar: { 
 
     width: { 
 
      ratio: 0.98 
 
     } 
 
    }, 
 
    axis: { 
 
     x: { 
 
     type: 'category', 
 
     categories: [10, 50, 100, 500, 2000, 5000], 
 
     tick: { 
 
      centered: false 
 
     } 
 
     } 
 
    }, 
 
    legend: { 
 
     show: false 
 
    } 
 
    }); 
 

 
    var width = chart.internal.x(1) - chart.internal.x(0); 
 
    d3.select(".c3-axis").selectAll(".tick text tspan").attr("dx", width/2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> 
 
<div id="chart" class="c3" style="max-height: 280px; position: relative;"></div>