Question

您好我已完成图表准备，但根据我的要求，我想在栏栏内添加x轴值。在我的虚拟数据中，我有x轴作为＆＃39; A＆＃39;＆＃39; B＆＃39;＆＃39; C＆＃39;＆＃39; D＆＃39;。如何在栏栏内移动这些字母。

<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

如何在条形图列中添加x轴文本

1 个答案: