D3.js selection.property() Function

0 0 1 minute read

The selection.property() function is used to set or change the property and value of a particular element. The value of a particular property can be deleted by setting its value to null.

Syntax:

selection.property(name[, value]);

Parameters: This function accept two parameters as mentioned above and described below:

name: The name of the property to set.
value: The property value to be set.

Return Value: This function does not return any value.

Example 1:

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>
</head>
 
<body>
    <div>
        <input type="text">
    </div>
 
    <script>
 
        // Sets value property of the input tag
        var input = d3.select("input")
            .property("value", "some value from input");
        var text = document.querySelector("input");
         
        // Value from input 
        console.log(text.value);
    </script>
</body>
 
</html>

Output:

Example 2:

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>
</head>
 
<body>
    <div>
        <input type="checkbox" class="checkbox"
            name="" id="">checkbox<br>
 
        <button>Click me</button>
    </div>
     
    <script>
        function func() {
 
            // Sets checked and value property
            // of the checkbox
            var chk = d3.select(".checkbox").property(
                "value", "some value from checkbox");
            var chk = d3.select(".checkbox")
                .property("checked", true);
            var text = document.querySelector(".checkbox");
 
            // Value from checkbox
            console.log(text.value);
            console.log(text.checked);
        }
         
        let btn = document.querySelector("button");
        btn.addEventListener("click", func);
    </script>
</body>
 
</html>