在 D3.js 中置于底部时条形图 X 轴被隐藏

Question

我要将 X 轴移到底部，它是不可见的，只有在条形图上才会出现。有一些我无法找出的 svg 区域问题。如何将条形图向上移动一点，以便可以容纳 X=Axis 标签。

这里是fiddlelinkWorking 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

这是你的fiddle：https://jsfiddle.net/gfwo0br9/

条形图仍然显示在轴的后面（实际上，条形图在 SVG 本身的末端下方）。要解决此问题，您必须正确绘制条形图（使用比例设置范围和域）。

在 D3.js 中置于底部时条形图 X 轴被隐藏

Barchart X-Axis is getting hidden when bringing to bottom in D3.js

javascript

svg

axis-labels

d3.js