D3.js node.leaves() Function
Last Updated :
23 Sep, 2020
The node.leaves() function in d3.js is used to return an array of leaf nodes of the given hierarchical data in traversal order.
Syntax:
node.leaves();
Parameters: This function does not accept any parameters.
Return Values: This function return an array.
Note: Leaf nodes are those nodes which have no children.
Below given are a few examples of the function given above.
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 >
< script >
// Constructing a tree
var tree = {
name: "rootNode",
children: [
{
name: "child1_leaf1"
},
{
name: "child2",
children: [
{
name: "grandchild1",
children: [
{ name: "leaf2" }
]
},
]
},
{
name: "child3",
children: [
{ name: "leaf3" },
{ name: "leaf4" },
]
}
]
};
var obj = d3.hierarchy(tree);
// Leaf nodes of the above given tree
console.log("Leaf nodes are: ");
console.log(obj.leaves());
</ script >
</ body >
</ html >
|
Output:
Example 2: The following code demonstrates accessing data of leaf nodes.
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 >
< script >
// Constructing a tree
var tree = {
name: "rootNode",
children: [
{
name: "child1_leaf1"
},
{
name: "child2",
children: [
{
name: "grandchild1",
children: [
{ name: "leaf2" }
]
},
]
},
{
name: "child3",
children: [
{ name: "leaf3" },
{ name: "leaf4" },
]
}
]
};
var obj = d3.hierarchy(tree);
// Leaf nodes of the above given tree are:
console.log(" Accessing Leaf nodes: ");
let leafArr = obj.leaves();
leafArr.forEach((e) => {
console.log(e.data);
console.log("depth: ", e.depth);
})
</ script >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...