D3.js interpolateTransformCss()函数

D3.js 中的d3.interpolateTransformCss()函数用于返回两个给定 CssTransform 属性之间的插值器函数。在这里可以使用 Transform 的几个属性，例如 translate、rotate、skewX 和 scale。

句法：

d3.interpolateTransformCss(a, b); 

参数：

• a：它是字符串CSS Transform 属性。
• b：它是字符串CSS Transform 属性。

返回：它返回插值函数。

下面给出了上述函数的几个例子。

示例 1：

html

  
  
  Document




  
  
  
  
// It gives the intermediate value between two given properties
    console.log(d3.interpolateTransformCss(
    "translateX(10px) scale(1.5)",
    "translateY(15px) scale(2)"
  )(0.5))
// It gives interpolate value with 0 part of "a" and 1 part of "b"
    console.log(d3.interpolateTransformCss(
    "translateX(10px) scale(1.5)",
    "translateY(15px) scale(2)"
  )(1))
// It gives interpolate value with 0.2 part of "a" and 0.8 part of "b"
    console.log(d3.interpolateTransformCss(
    "translateX(10px) scale(1.5)",
    "translateY(15px) scale(2)"
  )(0.8))
 

输出：

示例 2：

html

  
  
  Document


  .box1{
    margin-bottom: 40px;
    color: white;
    border: 2px solid black;
    width: 150px;
    height: 150px;
    background-color: green;
    transform: scale();
  }
  div{
    height: 100vh;
    display:flex;
    margin-left: 60px;
    align-items: center;
  }


  D3.interpolateTransformCss()
  
    
    
    
    
    Clickme
  
  
  
   
  
    let box1=document.querySelector(".box1");
    let btn=document.querySelector("button");
    let interpolateFunc=d3.interpolateTransformCss(
    "translateY(15px) scale(1.5)",
    "translateX(3px) rotate(10deg)"
  )(0.5);
  func=()=>{
    box1.style.transform=interpolateFunc;
  }
  btn.addEventListener("click", func);
  

输出：

点击前：

点击后：