當在D3.js中觸底時，Barchart X軸將被隱藏

Question

我可以將X軸移至底部，它不可見，僅在條形圖上顯示。 我無法找出某些svg區域問題。 如何將條形圖稍微向上移動，以便可以容納X = Axis標簽。

這是琴鍵鏈接， 但“ X軸標簽”在頂部

                     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本身的末端下方移動）。 要解決此問題，您必須正確繪制條形圖（使用比例尺設置范圍和域）。