D3.js linkVertical() Method
The d3.linkVertical() method returns a new link generator with vertical tangents. It is typically used when the root is on the left/right edge with the children going right/left.
Syntax:
var link = d3.linkVertical()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
Parameters: This function does not take any parameter.
Return Value: This method returns a new link generator.
Example:
HTML
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
< script src =
</ script >
</ head >
< body >
< h1 style = "text-align: center; color: green;" >
GeeksforGeeks
</ h1 >
< h3 style = "text-align: center;" >
D3.js | link.vertical() Method
</ h3 >
< center >
< svg id = "gfg" width = "200" height = "200" ></ svg >
</ center >
< script >
var data = [
{source: [100,25], target: [175,175]},
{source: [100,25], target: [25,175]}];
// Vertical link generator
var link = d3.linkVertical()
.source(function(d) {
return [d.source[1], d.source[0]];
})
.target(function(d) {
return [d.target[1], d.target[0]];
});
// Adding the link paths
d3.select("#gfg")
.selectAll("path")
.data(data)
.join("path")
.attr("d", link)
.classed("link", true);
</ script >
</ body >
</ html >
|
Output:
Last Updated :
14 Sep, 2020
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...