D3.js axis.orient()函数

D3.js 中的d3.axis.orient()函数用于设置方向并返回轴。如果未指定方向，则返回默认为“底部”的当前方向。

句法：

axis.orient([orientation])

参数：此函数接受如上所述和如下所述的单个参数：

• 方向：此参数是设置轴方向的大小。支持四个方向是：“顶部”，“底部”。 “左和右”。

返回值：此函数返回轴。

下面的程序说明了 D3.js 中的d3.axis.orient()函数：

示例 1：

HTML

   
        
        D3.js | d3.axis.orient() Function
         
        
   
   
   
      
      var svg = d3.select("body").append("svg")
                  .attr("width", 400)
                  .attr("height", 400);
                     
      // Create the Scale we will use for the Axis
      var axisScale = d3.scale.linear()
                        .domain([0, 100])
                        .range([0, 300]);
                           
      // Create the Axis
      var xAxis = d3.svg.axis()
                    .scale(axisScale)
                    .orient("top");
         
      // Create an SVG group Element for the Axis 
      // elements and call the xAxis function
      svg.append("g")
         .attr("transform", "translate(50,50)")
         .call(xAxis);
      
   

输出：

示例 2：

HTML

   
        
        D3.js | d3.axis.orient() Function
         
        
   
   
   
      
      var svg = d3.select("body").append("svg")
                  .attr("width", 400)
                  .attr("height", 400);
                     
      // Create the Scale we will use for the Axis
      var axisScale = d3.scale.linear()
                        .domain([0, 100])
                        .range([0, 300]);
                           
      // Create the Axis
      var xAxis = d3.svg.axis()
                    .scale(axisScale)
                    .orient("left");
         
      // Create an SVG group Element for the Axis 
      // elements and call the xAxis function
      svg.append("g")
         .attr("transform", "translate(50,50)")
         .call(xAxis);
      
   

输出：

示例 3：

HTML

   
        
        D3.js | d3.axis.orient() Function
         
        
   
   
   
      
      var svg = d3.select("body").append("svg")
                  .attr("width", 400)
                  .attr("height", 400);
                     
      // Create the Scale we will use for the Axis
      var axisScale = d3.scale.linear()
                        .domain([0, 100])
                        .range([0, 300]);
                           
      // Create the Axis
      var xAxis = d3.svg.axis()
                    .scale(axisScale)
                    .orient("right");
         
      // Create an SVG group Element for the Axis 
      // elements and call the xAxis function
      svg.append("g")
         .attr("transform", "translate(50,50)")
         .call(xAxis);
      
   

输出：