D3.js axis.tickSizeOuter()函数

D3.js 中的d3.axis.tickSizeOuter()函数用于将外部刻度大小设置为指定值并返回轴。外部刻度大小控制域路径的方形末端的长度，偏离轴的原始位置。

句法：

axis.tickSizeOuter([size])

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

• size：此参数是设置内、外刻度大小的大小。

返回值：此函数返回轴。

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

示例 1：

HTML

 
 
    
 
     
        D3.js | D3.axis.tickSizeOuter() Function 
     
    
     
     
    
     
        svg text { 
            fill: green; 
            font: 15px sans-serif; 
            text-anchor: center; 
        } 
     
 
    
 
     
        var width = 400, height = 400; 
        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", width) 
            .attr("height", height); 
    
        var xscale = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([0, width - 60]); 
    
        var x_axis = d3.axisBottom() 
            .scale(xscale).tickSizeOuter([40]).tickSizeInner([0]);
    
        var xAxisTranslate = height / 2; 
    
        svg.append("g") 
            .attr("transform", "translate(50, " 
                + xAxisTranslate + ")") 
            .call(x_axis)  
     
 

输出：

示例 2：

HTML

 
 
    
 
     
        D3.js | D3.axis.tickSizeOuter() Function 
     
    
     
     
    
     
        svg text { 
            fill: green; 
            font: 15px sans-serif; 
            text-anchor: end; 
        } 
     
 
    
 
     
        var width = 400, height = 400; 
        var svg = d3.select("body") 
            .append("svg") 
            .attr("width", width) 
            .attr("height", height); 
     
        var yscale = d3.scaleLinear() 
            .domain([0, 1]) 
            .range([height - 50, 0]); 
     
        var y_axis = d3.axisRight() 
            .scale(yscale).tickSizeOuter([20]);
     
        svg.append("g") 
            .attr("transform", "translate(100,20)") 
            .call(y_axis)  
     
 

输出：