D3.jsの下部に移動するときにBarchart X軸が非表示になっています

Question

X軸を下に移動すると、棒グラフ上に表示されず、表示されません。私が見つけることができないいくつかのSVG領域の問題があります。 barchartを少し上にシフトして、X = Axisラベリングに対応できるようにする方法。ここで

はフィドルのリンクはあなたのコードがいくつ問題がある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を2回、異なる翻訳で呼び出します。

しかし、軸の問題を解決するために、あなただけ正しくそれを翻訳する必要があります。ここでは

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自体の終わりの下にあります）。これを修正するには、バーを適切に描く必要があります（範囲とドメインを設定するスケールで）。