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

selection.clone()函数用于克隆选定的元素，并将这些克隆立即插入相同的元素之后。

用法:

selection.clone([deep]);

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

deep:如果deep为true，则后代节点也将被克隆。

返回值：此函数返回要插入的元素的克隆。

以下示例说明了D3.js中的selection.clone()函数：

范例1：当所有div在选择中生效时。

HTML

<!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> 
  
    <style> 
        h1 { 
            color:green; 
        } 
  
        p:hover { 
            background-color:grey; 
            cursor:pointer; 
        } 
  
        div { 
            width:300px; 
            color:#ffffff; 
            height:50px; 
            background-color:green; 
            margin:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div><span>1. Some text</span></div> 
    <div><span>2. Some text</span></div> 
  
    <button>Click Here!</button> 
  
    <script> 
        function func() { 
            // Selecting div and 
            // Cloning the div and 
            // Adding html to it 
            var div = d3.selectAll("div") 
                .clone() 
                .html("<span>I am cloned.</span>"); 
            console.log(div); 
  
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

范例2：当选择仅影响一个div时。

HTML

<!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> 
    <style> 
        h1 { 
            color:green; 
        } 
  
        p:hover { 
            background-color:grey; 
            cursor:pointer; 
        } 
  
        div { 
            width:300px; 
            color:#ffffff; 
            height:50px; 
            background-color:green; 
            margin:10px; 
        } 
    </style> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
    <div><span> 
        1. Only this div is cloned. 
    </span></div> 
    <div><span> 
        2. This div will not be cloned. 
    </span></div> 
      
    <button>Click Here!</button> 
  
    <script> 
        function func() { 
            // Selecting div and 
            // Cloning the divs 
            // Adding html to cloned divs 
  
            var div = d3.select("div") 
                .clone() 
                .html("<span>I am cloned.</span>"); 
            console.log(div); 
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
  
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

范例3：当deep等于true时，将克隆所有后代元素。

HTML

<!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> 
  
    <style> 
        h1 { 
            color:green; 
        } 
  
        div { 
            width:300px; 
            color:#ffffff; 
            height:50px; 
            background-color:green; 
            margin:10px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksforGeeks</h1> 
  
    <p>Descendants will also be cloned.</p> 
  
  
    <p> 
        Here Descendants of div is span 
        that will be cloned. 
    </p> 
  
    <div><span>1. This div will be cloned.</span></div> 
    <div><span>2. This div will be cloned.</span></div> 
    <button>Click me</button> 
  
    <script> 
        function func() { 
  
            // Selecting div and Cloning the divs 
            // and its descendant elements 
            var div = d3.selectAll("div") 
                .clone([true]) 
            console.log(div); 
            var b = document.querySelector("b"); 
            b.innerText = "This <b> tag is appended. " 
        } 
        let btn = document.querySelector("button"); 
        btn.addEventListener("click", func); 
    </script> 
</body> 
  
</html>

输出：

在单击按钮之前：
单击按钮后：

相关用法

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