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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。