Функция D3.js selection.clone ()

Опубликовано: 7 Декабря, 2021

Функция selection.clone () используется для клонирования выбранных элементов и вставляет эти клоны сразу после тех же элементов.

Синтаксис:

 selection.clone ([глубокий]);

Параметры: эта функция принимает отдельные параметры, как указано выше и описано ниже:

deep: если deep равен true, дочерние узлы также будут клонированы.

Возвращаемое значение: эта функция возвращает клон вставляемого элемента.

Примеры ниже иллюстрируют функцию selection.clone () в D3.js:

Пример 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 > 

Выход:

Перед нажатием кнопки:
После нажатия кнопки:

JavaScript

Функция D3.js selection.clone ()

HTML

HTML

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ