在 D3.js 中达到底部时，条形图 X 轴被隐藏

Question

我将 X 轴移到底部，它是不可见的，只有当它在条形图上时才会出现。有一些我无法找出的 svg 区域问题。如何将条形图向上移动一点，以便适应 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，翻译不同；

但是，为了解决轴问题，你只需要正确翻译它：

 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 本身的末端下方）。要解决这个问题，您必须正确绘制条形图（使用比例设置范围和域）。