D3.js selection.clone()函数

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

句法：

selection.clone([deep]);

参数：此函数接受如上所述和如下所述的单个参数：

• deep：如果 deep 为真，则后代节点也将被克隆。

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

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

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

HTML

  

    
    
    
    
  
    
        h1 {
            color: green;
        }
  
        p:hover {
            background-color: grey;
            cursor: pointer;
        }
  
        div {
            width: 300px;
            color: #ffffff;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    

  

    GeeksforGeeks
    1. Some text
    2. Some text
  
    Click Here!
  
    
        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);
    

  

输出：

• 在点击按钮之前：

  

• 点击按钮后：

  

实施例2：当在选择中仅在选择中实现时。

HTML

  

    
    
    
    
    
        h1 {
            color: green;
        }
  
        p:hover {
            background-color: grey;
            cursor: pointer;
        }
  
        div {
            width: 300px;
            color: #ffffff;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    
  

    GeeksforGeeks
    
        1. Only this div is cloned.
    
    
        2. This div will not be cloned.
    
      
    Click Here!
  
    
        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);
  
    

  

输出：

• 在点击按钮之前：

  

• 点击按钮后：

  

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

HTML

  

    
    
    
    
  
    
        h1 {
            color: green;
        }
  
        div {
            width: 300px;
            color: #ffffff;
            height: 50px;
            background-color: green;
            margin: 10px;
        }
    

  

    GeeksforGeeks
  
    Descendants will also be cloned.
  
  
    
        Here Descendants of div is span
        that will be cloned.
    
  
    1. This div will be cloned.
    2. This div will be cloned.
    Click me
  
    
        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);
    

  

输出：

• 在点击按钮之前：

  

• 点击按钮后：