c3 Balkendiagramm Tick-Werte mit nicht zentrierten Ticks ausrichten

Question

Ich versuche, die Werte auf der X-Kategorie-Achse auf die Seiten der Balken zu schieben, nicht in der Mitte. Anscheinend ist es möglich, die Ticks dort zu setzen, aber können Werte auch unter die Ticks gehen?

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

Es ist nicht die schönste Antwort, und das letzte Etikett wird abgehackt, aber diese 2 Zeilen, nachdem Sie (Sie werden c3 die Polsterung Optionen untersuchen) haben die Grafik gerendert tun der Trick:

// 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>