Barchart X-Axis спрятан при сносе в D3.js

Question

Я машу X-Axis снизу, он не виден и только наступает, когда он находится на гистограмме. Существует проблема с svg-областью, которую я не могу узнать. как сдвинуть планшет немного вверх так, чтобы X = маркировка осей могла быть размещена.

Вот ссылка скрипку Working but X-Axis Label is on the Top

     a = 100; 
        b = 150; 
        c = 103; 
        dataset= [a,b,c]; 
        var w = 500; 
         var h = 250; 
         var barPadding = 1; 
         var marginleft = 1; 
         var margintop =1; 
         var marginbottom =15; 
         margin = {top:1, right:10, bottom:1, left:1}; 
        colors = ["#e41a1c", "#377eb8", "#4daf4a"]; 
         h = h ; 

      var category= ['A', 'B', 'C']; 

        var x = d3.scale.ordinal() 
         .domain(category) 
         .rangeRoundBands([0, w]); 



        var xAxis = d3.svg.axis() 
         .scale(x) 
         .orient("bottom") 
         .ticks(0);; 



       //Create SVG element 
         var svg = d3.select("#hello") 
         .append("svg") 
         .attr("width", w) 
         .attr("height", h) 
         .append("g") 
         .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


        svg.append("g") 
         .attr("class", "x axis") 
         .attr("transform", "translate(0," + h + ")") 
         .call(xAxis); 

        // GENERATING RECTANGLES AND MAKING BAR CHART 

        svg.selectAll("rect") 
        .data(dataset) 
        .enter() 
        .append("rect") 

        .attr("x", function(d, i) { 
          return i * (w/dataset.length); 
         }) 
        .attr("y", function(d) { 
          return h - (d*1.5) ; 
        }) 
        .attr("width", w/dataset.length - barPadding) 
        .attr("height", function(d) { 
          return (d*2); 
        }) 

        .attr("fill", function(d,i) { 
          return colors[i]; 
       //  .attr("fill", function(d) { 
       //   return "rgb(0, 0, " + (d * 10) + ")"; 
         }); 

        var x_Axis = svg.append('g') 
          .attr('class','xnewaxis') 
          .attr("transform", "translate(0," + (20) + ")") 
          .call(xAxis) 
          .selectAll("text") 
           .style("text-anchor", "start") 
           .attr("dx", "-2.5em") 
           .attr("dy", ".5em") 
           .attr("transform", "rotate(-15)"); 

Answer 1

Ваш код имеет несколько проблем:

• двух различных наборов данных для баров;
• не имеет порядковой шкалы для позиционирования баров (на самом деле, есть один, который вы не используете);
• отсутствует линейная шкала для значений баров;
• звонки xAxis два раза, с разными переводами;

Но для решения проблемы оси, вам просто нужно правильно перевести:

var x_Axis = svg.append('g') 
    .attr('class','xnewaxis') 
    .attr("transform", "translate(0," + (h- 30) + ")") 
    //30 here is the padding from the bottom of the SVG 

Вот ваш скрипку: https://jsfiddle.net/gfwo0br9/

Бруски еще показывает позади оси (на самом деле , бары идут ближе к концу самого SVG). Чтобы исправить это, вам нужно будет правильно нарисовать бары (со шкалой, задающей диапазон и домены).