D3.js selection.property() Function
Last Updated :
16 Jun, 2022
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 >
</ 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 >
</ 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 >
|
Output:
Before clicking the click me button:
After clicking the click me button:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...