D3.js axisRight()函数

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

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

句法：

d3.axisRight( scale )

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

• scale：此参数保存使用的比例。

返回值：此函数返回创建的垂直向右轴。

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

示例 1：

HTML

  

    
        D3.js | d3.axisRight() Function
    
    
    

  

    
        var width = 400, height = 400;
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
  
        var yscale = d3.scaleLinear()
            .domain([0, 100])
            .range([height - 50, 0]);
  
        var y_axis = d3.axisRight(yscale);
  
        svg.append("g")
            .attr("transform", "translate(100,10)")
            .call(y_axis)
    

  

输出：

示例 2：

HTML

  

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

  

    
        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 yscale = d3.scaleLinear()
            .domain([d3.min(data), d3.max(data)])
            .range([height - 50, 0]);
  
        var y_axis = d3.axisRight(yscale);
  
  
        svg.append("g")
            .attr("transform", "translate(100,20)")
            .call(y_axis)
    

  

输出：