D3.js axis.tickFormat()函数

D3.js 中的d3.axis.tickFormat()函数用于控制标记哪些刻度。该函数用于实现您自己的刻度格式函数。

句法：

axis.tickFormat([format])

参数：此函数接受以下参数。

• format：这些参数是设置刻度格式函数的格式。

返回值：该函数返回当前设置的刻度格式函数，默认为null。

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

示例 1：

 
 
  
 
     
        D3.js | D3.axis.tickFormat() 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 yscale = d3.scaleLinear() 
            .domain([0, 1]) 
            .range([height - 50, 0]); 
  
        var y_axis = d3.axisLeft().scale(yscale)
        .tickValues([0, .2, .5, .70, 1])
        .tickFormat((d, i) => ['a', 'e', 'i', 'o', 'u'][i]); 
  
  
        svg.append("g") 
            .attr("transform", "translate(100, 20)") 
            .call(y_axis) 
    
 

输出：

示例 2：

 
 
  
 
     
        D3.js | D3.axis.tickFormat() Function 
     
     
     
      
     
        svg text { 
            fill: green; 
            font: 15px sans-serif; 
            text-anchor: center; 
        } 
     
 
  
 
     
        var width = 600, 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 - 100]); 
  
        var x_axis = d3.axisBottom(xscale).ticks(4)
        .tickFormat(x => `(${x.toFixed(1)})`); 
  
        var xAxisTranslate = height / 2; 
  
        svg.append("g") 
            .attr("transform", "translate(50, " 
            + xAxisTranslate + ")") 
            .call(x_axis) 
     
 

输出：