d3.js d3.range()用法及代碼示例

D3.js中的d3.range()函數用於返回一個數組，該數組包含從起始參數開始的算術級數，並在稱為步的uniformly-spaced數值序列上進行迭代，並以終止參數結束。

用法:

d3.range(start, stop, step)

參數：該函數接受三個參數，如下所示：

start:它是包含整數值，是輸出數組的第一個元素。其默認值為0。
stop:它是不與輸出數組相加的互斥整數值。
step:它是定期與起始值相加並打印結果直到終止值到達的整數值。

返回值：它返回一個包含算術級數的數組。

以下程序說明了D3.js中的d3.range()函數。

範例1：

<body> 
    <script src='https://d3js.org/d3.v4.min.js'></script> 
  
    <script> 
      
        // Calling to d3.pairs() function 
        // with parameters start, stop and steps. 
        A = d3.range(0, 4, 1); 
        B = d3.range(10, 100, 10); 
        C = d3.range(5, 50, 5); 
        D = d3.range(1, 10, 2); 
          
        // Getting an array of arithmetic progression 
        document.write(A + "<br>"); 
        document.write(B + "<br>"); 
        document.write(C + "<br>"); 
        document.write(D + "<br>"); 
    </script> 
</body>

輸出：

[0,1,2,3]
[10,20,30,40,50,60,70,80,90]
[5,10,15,20,25,30,35,40,45]
[1,3,5,7,9]

範例2：

<body> 
    <script src='https://d3js.org/d3.v4.min.js'></script> 
  
    <script> 
      
        // Calling to d3.pairs() function 
        // with parameters start, stop and steps. 
        A = d3.range(1, 2); 
        B = d3.range(10, 20); 
        C = d3.range(0, 10, 0.5); 
        D = d3.range(1, 10, 0.9); 
          
        // Getting an array of arithmetic progression 
        document.write(A + "<br>"); 
        document.write(B + "<br>"); 
        document.write(C + "<br>"); 
        document.write(D + "<br>"); 
    </script> 
</body>

輸出：

1
[10,11,12,13,14,15,16,17,18,19]
[0,0.5,1,1.5,2,2.5,3,3.5,4,4.5,5,5.5,6,6.5,7,7.5,8,8.5,9,9.5]
[1,1.9,2.8,3.7,4.6,5.5,6.4,7.3,8.2,9.1]

注意：在上麵的代碼中，某些range()函數未采用步進值，因此其默認值被視為1。

參考： https://devdocs.io/d3~5/d3-array#range

相關用法

注：本文由純淨天空篩選整理自Kanchan_Ray大神的英文原創作品 D3.js | d3.range() function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。