D3.js axis.tickArguments()函数

D3.js 中的d3.axis.tickArguments()函数用于控制轴显示哪些刻度。此函数返回轴生成器

句法：

axis.tickArguments([arguments])

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

• 参数：这些参数用于显示刻度数和自定义刻度值的格式。

返回值：此函数返回轴生成器。

注意：这类似于 d3.axis.tick()函数，但在此函数中，所有参数都可以是可选的。

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

示例 1：

HTML

  

    
        D3.js | D3.axis.tickArguments() 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).tickArguments([5]);
  
        var xAxisTranslate = height / 2;
  
        svg.append("g")
            .attr("transform", "translate(50, "
                + xAxisTranslate + ")")
            .call(x_axis) 
    

  

输出：

示例 2：

HTML

  

    
        D3.js | d3.axis.tickArguments() 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.axisLeft()
            .scale(yscale).tickArguments([3, "$.2f"]);
  
        svg.append("g")
            .attr("transform", "translate(100,20)")
            .call(y_axis) 
    

  

输出：