D3.js stratify() Function
The d3.stratify() function is used to construct and return a new stratify operator. This operator has its own default settings. This function is used to convert a tree form link representation to a hierarchy.
Syntax:
d3.stratify();
Parameters: This function does not accept any parameter.
Return Values: This function returns a function.
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 src = "https://d3js.org/d3.v4.min.js" > </ script > </ head > < body > < script > // This is the data of the CSV file // child, parent // a, // b, a // c, a // d, a // e, b // f, c // g, c // h, d // i, h // Fetching the csv File d3.csv("./data.csv",(links)=>{ var child = links.columns[0]; var parent = links.columns[1]; stratify = d3.stratify() .id(d => d[child]) .parentId(d => d[parent]); var root=stratify(links) console.log(root) }); </ 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"/> < title >GeekforBeginner</ title > < script src = "https://d3js.org/d3.v4.min.js" > </ script > </ head > < body > < script > // This is the data of the CSV file // child, parent // 0, // 1, 0 // 2, 0 // 3, 0 // 4, 2 // 5, 3 // Fetching the csv File d3.csv("./data.csv",(links)=>{ var child = links.columns[0]; var parent = links.columns[1]; stratify = d3.stratify() .id(d => d[child]) .parentId(d => d[parent]); var root=stratify(links); console.log(root.children[0].data); console.log(root.children[1].data); console.log(root.children[2].data); }); </ script > </ body > </ html > |
Output:
Contact Us