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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。