d3.js sequential.domain()用法及代码示例

顺序刻度与连续刻度非常相似。在连续规模上，域和范围之间的映射是连续进行的。唯一的区别是此标度的输出范围由其内插器固定，并且该范围无法更改。

sequence.domain()函数用于设置给定顺序标度的域。域数组始终接受两个数值。

用法:

sequential.domain([domain]);

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

domain:这将设置刻度的最小和最大域值。

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

范例1：

HTML

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8" />  
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/>  
  
    <script src= 
        "https://d3js.org/d3.v6.min.js"> 
    </script> 
</head>  
  
<body>  
    <h2 style="color:green"> GeeksforGeeks </h2> 
    
    <h4> D3.js | sequential.domain() Function </h4> 
    
    <script>  
        var sequential = d3.scaleSequential() 
            // Setting domain to [10,20] 
            .domain([10,20]); 
  
        document.write("<h4>From original scale:</h4>"); 
  
        document.write("<p>sequential(11):",  
                    sequential(11) + "</p>"); 
  
        document.write("<p>sequential(16):",  
                    sequential(16) + "</p>"); 
    </script>  
</body> 
  
</html>

输出：

范例2：当域以字符串数字形式给出时，它将被解析为数字。

HTML

<!DOCTYPE html>  
<html lang="en">  
  
<head>  
    <meta charset="UTF-8" />  
    <meta name="viewport"
        path1tent="width=device-width,  
        initial-scale=1.0"/>  
  
    <script src= 
        "https://d3js.org/d3.v6.min.js"> 
    </script> 
</head>  
  
<body>  
    <h2 style="color:green"> GeeksforGeeks </h2> 
    
    <h4> D3.js | sequential.domain() Function </h4> 
    
    <script>  
        var sequential = d3.scaleSequential() 
            // Setting domain to ["10","100"] 
            .domain(["10","100"]); 
  
        document.write("<p>sequential(10):",  
                    sequential(10) + "</p>"); 
  
        document.write("<p>sequential(100):",  
                    sequential(100) + "</p>"); 
    </script>  
</body> 
  
</html>

输出：

相关用法

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