d3.js line.y()用法及代码示例

line.y()函数用于将y访问器设置为函数或数字，然后将其返回给d3.line()函数调用的行生成器函数。如果未指定y，则它将返回当前的y访问器。

方法：在此示例中，要创建折线图，请首先创建SVG元素，并按照以下示例中的说明设置其宽度和高度。然后创建一个CSV文件，该文件的数据在示例中给出。我们将组容器附加到SVG。之后，使用d3.line()函数创建一个行生成器函数。

创建行生成器函数后，设置x-scale和y-scale域和范围，并将比例尺附加到SVG。然后使用line.x()和line.y()分别在x轴和y轴上提供x-scale数据和y-scale数据。之后，将路径附加到SVG，并将来自行生成器函数的数据提供给路径容器的“d”属性。给折线图一些样式，并完成它。

用法:

line.y([y]);

参数：该函数接受如上所述和以下描述的单个参数。

y:该参数用于设置y-accessor。

返回值：此函数不返回任何内容。

下面给出的是上面给出的函数的一些例子。

例：

<!DOCTYPE html>  
<html lang="en">  
    <head>  
        <meta charset="UTF-8" />  
        <meta
            property="viewport"
            content="width=device-width,  
                    initial-scale=1.0"/>  
        <title>GeeksforGeeks</title>  
        <!--Fetching from CDN of D3.js -->
        <script src=  
        "https://d3js.org/d3.v4.min.js">  
        </script> 
    </head> 
    <body>  
        <div style="width:300px; height:300px;"> 
            <center> 
                <h1 style="color:green"> 
                    GeeksforGeeks 
                </h1>  
                <h2> 
                    line.y(); 
                </h2>  
            </center> 
            <svg width="300" height="300"> 
            </svg> 
        </div> 
        <script> 
        // Selecting SVG and appending group tag 
        var svg = d3.select("svg") 
          .append("g") 
            .attr("transform", 
                  "translate(80, -80)"); 
        // Data for the CSV file 
            // year, population 
            // 110, 20 
            // 130, 25 
            // 135, 20 
            // 140, 25 
            // 180, 20 
  
        // Fetching data from CSV file 
        d3.csv("data.csv", 
          (data)=>{ 
            // Setting domain and range of x-scale  
            var x = d3.scaleLinear() 
              .domain([100, 200]) 
              .range([ 0, 200]); 
  
            // Appending x-axis 
            svg.append("g") 
              .attr("transform", "translate(0, 300)") 
              .call(d3.axisBottom(x)); 
              svg.append("text")              
                .attr("transform", "translate(100, 340)") 
                .text("Year"); 
          
            // Setting domain and range of y-scale 
            var y = d3.scaleLinear() 
              .domain([0, 100]) 
              .range([ 200, 0 ]); 
  
            // Appending y-axis 
            svg.append("g") 
              .attr("transform", "translate(0, 100)") 
              .call(d3.axisLeft(y)); 
  
            svg.append("text")              
            .attr("transform", "rotate(-90)") 
            .attr("y", -50) 
            .attr("x", -250) 
            .attr("dy", "1em") 
            .text("Population"); 
                  
          
            // Constructing line generator 
            var line=d3.line(); 
            line.x(function(d) { return x(+d.year) }); 
  
            // Using line.x() Function 
            line.y(function(d) { return y(+d.population) }); 
  
            // Appending the path i.e the line 
            svg.append("path") 
              .datum(data) 
              .attr("stroke", "green") 
              .attr("stroke-width", "2") 
              .attr("fill", "none") 
              .attr("d", line) 
              .attr("transform", "translate(0, 80)"); 
        }); 
        </script>  
    </body>  
</html>

输出：

相关用法

注：本文由纯净天空筛选整理自tarun007大神的英文原创作品 D3.js line.y() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。