D3.js svg.axis()函数

D3.js 中的d3.svg.axis()函数用于创建新的默认轴。这个函数会在这个轴上构造一个新的轴，可以进行各种操作。

句法：

d3.svg.axis()

参数：此函数不接受任何参数。

返回值：此函数返回创建的轴。

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

示例 1：

HTML

  

    
        D3.js | d3.axisLeft() 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);
  
        // 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.axisLeft() 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([300, 0]);
  
        // Create the Axis
        var xAxis = d3.svg.axis()
            .scale(axisScale);
  
        // Create an SVG group Element for the 
        // Axis elements and call the xAxis function
        svg.append("g")
            .attr("transform", "translate(50, 50)")
            .call(xAxis);
    

  

输出：