D3.js 连续.range()函数

d3.js 中的Continuous.range()函数用于将刻度的范围设置为指定的值数组，该数组必须包含两个或两个以上的值。范围内的元素可以是数字或字符串。

句法：

continuous.range([range]);

参数：此函数接受如上所述和下文所述的单个参数。

• [范围]：这是一个数组，其中包含指定域的范围。

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

下面的示例说明了 JavaScript 中的 D3.js Continuous.range()函数：

Example1：当范围数组是字符串颜色时。

HTML

    
    
    
    
    
    
    
    
    
    


    Geeksforgeeks
     
     
D3.js continuous.range() Function 
 
 
    
    var continuous = d3.scaleLinear()
                // Domain ranges -1, 0, 1
                    .domain([-1, 0, 1])
                // Range for the domain
                    .range(["red", "green", "blue"]);
 
    document.write("<br/>")
    document.write("<h3>"+continuous(0)+"</h3>");
    document.write("<h3>"+continuous(1)+"</h3>");
    document.write("<h3>"+continuous(0.5)+"</h3>");
    document.write("<h3>"+continuous(-1)+"</h3>");
 
    // Out of domain values
    document.write("<h3>"+continuous(1.5)+"</h3>");
    document.write("<h3>"+continuous(2)+"</h3>");
    

输出：

示例 2：当范围数组的类型为 number 时。

HTML

    
    
    
    
    
    
    
    
    
    


    Geeksforgeeks
     
     
D3.js continuous.range() Function 
 
 
    
    var continuous = d3.scaleLinear()
                // Domain ranges -1, 0, 1
                    .domain([-1, 0, 1])
                // Range for the domain
                    .range([1,2,3,4,5,6,7,8,9]);
  
    document.write("<br/>")
    document.write("<h3>"+continuous(0)+"</h3>");
    document.write("<h3>"+continuous(1)+"</h3>");
    document.write("<h3>"+continuous(0.5)+"</h3>");
    document.write("<h3>"+continuous(-1)+"</h3>");
    document.write("<h3>"+continuous(1.5)+"</h3>");
    document.write("<h3>"+continuous(2)+"</h3>");
    

输出：