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

log.interpolate()函数用于设置范围插值器工厂，该工厂用于为相邻范围中的每对值创建插值器。如果未指定工厂，则它将返回标尺的当前插值器工厂。

用法:

log.interpolate(interpolate);

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

interpolator:此参数接受插值器。

方法：首先使用d3.js CDN导入d3.js，然后使用d3.scaleLog()函数进行对数缩放。此函数将返回对数刻度，然后使用log.domain()和log.range()函数设置刻度的范围和范围，如下例所示。然后将插值器更改为interpolatorRound以将输出舍入到最接近的整数。使用document.write()函数将输出写入文档。

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

范例1：

<!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.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <p>D3.js log.interpolate() Function </p> 
  
    <script> 
        var log = d3.scaleLog() 
            .domain([1, 10]) 
            .range([10, 20, 30, 40, 50, 60, 70, 80, 90]) 
  
            // Using interpolateRound 
            .interpolate(d3.interpolateRound); 
  
        document.write("<h3>log(1.0):"  
                + log(1.0) + "</h3>"); 
        document.write("<h3>log(2.0):"  
                + log(2.0) + "</h3>"); 
        document.write("<h3>log(3.5):"  
                + log(3.5) + "</h3>"); 
        document.write("<h3>log(4.1):"  
                + log(4.1) + "</h3>"); 
        document.write("<h3>log(1.5):"  
                + log(1.5) + "</h3>"); 
    </script> 
</body> 
  
</html>

输出：

范例2：

<!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.v4.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <p>D3.js log.interpolate() Function </p> 
  
    <script> 
        var log = d3.scaleLog() 
            .domain([1, 100]) 
            .range(["red", "blue"]) 
  
            // Using interpolate 
            .interpolate(d3.interpolate); 
  
        document.write("<h3>log(11.0):"  
                + log(11.0) + "</h3>"); 
        document.write("<h3>log(12.0):"  
                + log(12) + "</h3>"); 
        document.write("<h3>log(31.5):"  
                + log(31.5) + "</h3>"); 
        document.write("<h3>log(41):"  
                + log(41) + "</h3>"); 
        document.write("<h3>log(1.5):"  
                + log(1.5) + "</h3>"); 
    </script> 
</body> 
  
</html>

输出：

相关用法

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