D3.js axisLeft()函数

可以使用内置的 D3 函数绘制轴。它由线条、刻度和标签组成。 Axis API 可以使用以下脚本进行配置。

D3.js 中的d3.axisLeft()函数用于创建左垂直轴。这个函数将为给定的比例构造一个新的左向轴生成器，带有空的刻度参数，刻度大小为 6，填充为 3。

句法：

d3.axisLeft( scale )

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

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

返回值：此函数返回一个创建的左垂直轴。

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

示例 1：

HTML

  

    
        D3.js d3.axisLeft() 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.axisLeft(yscale);
  
        svg.append("g")
            .attr("transform", "translate(100, 10)")
            .call(y_axis)
    

  

输出：

示例 2：

HTML

  

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

  

    
        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.axisLeft(yscale);
  
        svg.append("g")
            .attr("transform", "translate(100, 20)")
            .call(y_axis)
    

  

输出：