d3.js interpolateObject()用法及代碼示例

D3.js中的interpolateObject()函數用於返回給定兩個對象之間的插值器函數。如果“a”中存在“b”的任何屬性，則使用插值為“a”和“b”創建通用插值器。

用法:

d3.interpolateObject(a, b);

參數：以下是兩個參數：

a:它是Javascript對象。
b:它也是Javascript對象。

返回值：它返回兩個對象的插值函數。

下麵給出了上述函數的一些示例。

範例1：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
   </script> 
  <script> 
    let obj1={ 
      "a":10, 
      "b":20, 
      "c":30 
    }  
    let obj2={ 
      "a":40, 
      "b":50, 
      "d":60, 
      "e":70 
    }  
    let interpolationFunction= 
d3.interpolateObject(obj1, obj2); 
    /* Note the property d and e will not change 
       as they are not present in obj1*/ 
    console.log(interpolationFunction(0)) 
    console.log(interpolationFunction(0.5)) 
    console.log(interpolationFunction(1)) 
    console.log(interpolationFunction(1.5)) 
    console.log(interpolationFunction(2)) 
    console.log(interpolationFunction(2.5)) 
    console.log(interpolationFunction(3)) 
  </script> 
</body> 
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <meta name="viewport" 
        content="width=device-width,  
                 initial-scale=1.0"> 
  <title>Document</title> 
</head> 
<style> 
</style> 
<body> 
  <!--Fetching from CDN of D3.js -->
  <script type = "text/javascript" 
          src = "https://d3js.org/d3.v4.min.js"> 
  </script> 
  <script> 
    console.log("When obj a is not given") 
    console.log(d3.interpolateObject({}, {"a":1, "b":2})(0.5)) 
    console.log(d3.interpolateObject({}, {"a":1, "b":2})(1)) 
    console.log(d3.interpolateObject({}, {"a":1, "b":2})(2)) 
    console.log("When no property of obj b exists in obj a") 
    console.log( 
d3.interpolateObject({"c":4, "d":3}, {"a":10, "b":12})(5)) 
    console.log("When both objects are empty object") 
    console.log(d3.interpolateObject({}, {})(5)) 
   
 </script> 
</body> 
</html>

輸出：

相關用法

注：本文由純淨天空篩選整理自tarun007大神的英文原創作品 D3.js interpolateObject() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。