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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。