D3.js axisTop()函数

可以使用内置的 D3 函数绘制轴。这是由线条、刻度和标签组成的。 D3.js 中的d3.axisTop()函数用于创建顶部水平轴。这个函数将为给定的比例构造一个新的面向顶部的轴生成器，带有空的刻度参数，刻度大小为 6，填充为 3。

Axis API 可以使用以下脚本进行配置。

句法：

d3.axisTop(scale)

参数：该函数只接受一个参数，如上所述，如下所述：

• scale：这个参数是使用的比例。

返回值：此函数返回顶部水平轴。

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

示例 1：

HTML

  

    
        D3.js | d3.axisTop() Function
    
    
    

  

    
        var width = 400, height = 400;
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
  
        var xscale = d3.scaleLinear()
            .domain([0, 100])
            .range([0, width - 50]);
  
        var x_axis = d3.axisTop(xscale);
  
        svg.append("g")
            .attr("transform", "translate(20,100)")
            .call(x_axis)
    

  

输出：

示例 2：

HTML

  

    
        D3.js | d3.axisTop() Function
    
      
    
    
      
    
        svg text {
            fill: green;
            font: 15px sans-serif;
            text-anchor: end;
        }
    

  

    
        var width = 400, height = 400;
        var data = [10, 12, 14, 16, 18, 20];
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
  
        var xscale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([0, width - 60]);
  
        var x_axis = d3.axisTop(xscale);
  
        var xAxisTranslate = height / 2;
  
        svg.append("g")
            .attr("transform", "translate(50, "
            + xAxisTranslate + ")")
            .call(x_axis)
    

  

输出：

参考： https ://devdocs.io/d3~5/d3-axis#axisTop