如何在條形圖列中添加x軸文本

Question

嗨我已完成圖表準備，但按照我的要求，我想添加x軸值（如欄內欄）。在我的虛擬數據中，我的x軸爲'A'，'B'，'C'，'D'。如何在欄列內移動這些字母。

<script type="text/javascript"> 
$(document).ready(function(){ 

    InitChart1(); 

    }); 
function InitChart() { 
var barData = [{ 
     'x': 'A', 
     'y': 50 
     }, { 
     'x': 'B', 
     'y': 75 
     }, { 
     'x': 'C', 
     'y': 110 
     }, { 
     'x': 'D', 
     'y': 150 
     }]; 

      var vis = d3.select('#visualisation1'), 
      WIDTH = 500, 
      HEIGHT = 500, 
      MARGINS = { 
       top: 20, 
       right: 20, 
       bottom: 20, 
       left: 50 
      }, 
      xRange = d3.scale.ordinal().rangeRoundBands([MARGINS.left, WIDTH - MARGINS.right], 0.1).domain(barData.map(function (d) { 
       return d.x; 
      })), 


      yRange = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, 
       d3.max(barData, function (d) { 
       return d.y; 
       }) 
      ]), 

      xAxis = d3.svg.axis() 
       .scale(xRange) 
       .tickSize(5) 
       .tickSubdivide(true), 

      yAxis = d3.svg.axis() 
       .scale(yRange) 
       .tickSize(5) 
       .orient("left") 
       .tickSubdivide(true); 


      vis.append('svg:g') 
      .attr('class', 'x axis') 
      .attr('transform', 'translate(0,' + (HEIGHT - MARGINS.bottom) + ')') 
      .call(xAxis); 

      vis.append('svg:g') 
      .attr('class', 'y axis') 
      .attr('transform', 'translate(' + (MARGINS.left) + ',0)') 
      .call(yAxis); 

      vis.selectAll('rect') 
      .data(barData) 
      .enter() 
      .append('rect') 

      .attr('x', function (d) { 
       return xRange(d.x); 
      }) 
      .attr('y', function (d) { 
       return yRange(d.y); 
      }) 
      .attr('width', 75) 
      .attr('height', function (d) { 
       return ((HEIGHT - MARGINS.bottom) - yRange(d.y)); 
      }) 
      .attr('fill', 'grey'); 
}</script> 

Answer 1

我相信你正在尋找labels而不是axis ticks。本教程應該引導你完成它。

http://alignedleft.com/tutorials/d3/making-a-bar-chart