d3.js svg.axis()用法及代码示例

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

用法:

d3.svg.axis()

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

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

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

范例1：

HTML

<html> 
  
<head> 
    <title> 
        D3.js | d3.axisLeft() Function 
    </title> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
</head> 
  
<body> 
    <script> 
        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); 
    </script> 
</body> 
  
</html>

输出：

范例2：

HTML

<html> 
  
<head> 
    <title> 
        D3.js | d3.axisLeft() Function 
    </title> 
    <script src="//d3js.org/d3.v3.min.js"></script> 
</head> 
  
<body> 
    <script> 
        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); 
    </script> 
</body> 
  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自SHUBHAMSINGH10大神的英文原创作品 D3.js svg.axis() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。