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

d3.js中的d3.scaleQuantize()函数用于创建类似于线性比例的新比例，不同之处在于线性比例使用离散比例和dis-continuous比例。

用法:

d3.scaleQuantize();

参数：此函数不接受任何参数。

返回值：d3.scaleQuantize()函数返回一个函数。

范例1：

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" path1tent="width=device-width,  
        initial-scale=1.0" /> 
    <title>Geeks for geeks</title> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src="https://d3js.org/d3-color.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-interpolate.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
    </script> 
  
    <style> 
        body { 
            line-height:5px; 
            text-align:center; 
        } 
  
        h2 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>Geeks for geeks</h2> 
    <p>D3.scaleQuantize() Function </p> 
    <script> 
        var object = d3.scaleQuantize() 
            .domain([0, 1]) 
            .range(["less than 0.5", "greater than 0.5"]); 
        document.write("<br/>") 
        document.write("<h3>" + object(0.4) + "</h3>"); 
        document.write("<h3>" + object(0.5) + "</h3>"); 
    </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" /> 
    <title>Geeks for geeks</title> 
    <script src="https://d3js.org/d3.v4.min.js"> 
    </script> 
    <script src="https://d3js.org/d3-color.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-interpolate.v1.min.js"> 
    </script> 
    <script src= 
        "https://d3js.org/d3-scale-chromatic.v1.min.js"> 
    </script> 
  
    <style> 
        body { 
            line-height:5px; 
            text-align:center; 
        } 
  
        h2 { 
            color:green; 
        } 
    </style> 
</head> 
  
<body> 
    <h2>Geeks for geeks</h2> 
    <p>D3.scaleQuantize() Function </p> 
    <script> 
        var object = d3.scaleQuantize() 
  
            // Value from 1 to 10 decides  
            // which value to output 
            .domain([1, 10]) 
            .range(["1. This is object(1)", 
                "2. This is object(2)", 
                "3. This is object(3)", 
                "4. This is object(4)", 
                "5. This is object(5)", 
                "6. This is object(6)", 
                "7. This is object(7)", 
                "8. This is object(8)", 
                "9. This is object(9)", 
                "10. This is object(10)"]); 
                  
        document.write("<br/>") 
        document.write("<h3>" + object(1) + "</h3>"); 
        document.write("<h3>" + object(2) + "</h3>"); 
        document.write("<h3>" + object(3) + "</h3>"); 
        document.write("<h3>" + object(4) + "</h3>"); 
        document.write("<h3>" + object(5) + "</h3>"); 
        document.write("<h3>" + object(6) + "</h3>"); 
        document.write("<h3>" + object(7) + "</h3>"); 
        document.write("<h3>" + object(8) + "</h3>"); 
        document.write("<h3>" + object(9) + "</h3>"); 
        document.write("<h3>" + object(10) + "</h3>"); 
    </script> 
</body> 
  
</html>

输出：

相关用法

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