d3.js linkHorizontal 示例说明
最编程
2024-05-04 17:55:00
...
这个d3.linkHorizontal()方法 r返回带有水平切线的新链接生成器。现在是通常在根部位于顶部/底部边且子项向下/向上时使用。
用法:
var link = d3.linkHorizontal() .x(function(d) { return d.x; }) .y(function(d) { return d.y; });
参数:此函数不带任何参数。
返回值:此方法返回一个新的链接生成器。
例:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src=
"https://d3js.org/d3.v5.min.js">
</script>
</head>
<body>
<h1 style="text-align:center; color:green;">
GeeksforGeeks
</h1>
<h3 style="text-align:center;">
D3.js | linkHorizontal() Method
</h3>
<center>
<svg id="gfg" width="200" height="200"></svg>
</center>
<script>
var data = [
{source:[100,25], target:[200,175]},
{source:[100,25], target:[25,175]}];
// Horizontal link generator
var link = d3.linkHorizontal()
.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>
输出:
上一篇: mysql 主从复制配置
推荐阅读
-
d3.js linkHorizontal 示例说明
-
Python scipy.optimize.brentq 示例说明
-
Moment.js isAfter 示例说明
-
机器人系统 ros2-开发实践 04-ROS2 中 tf2 的定义和示例说明
-
Python scipy.signal.iirnotch 示例说明
-
Java 进程 getErrorStream 示例说明
-
Python difflib.get_close_matches 示例说明
-
人民日报注释语料库 (PFR) 1.标记说明 2.格式说明 3.示例 4.生语料库和熟语料库 5.其他语料库摘要
-
Python torch.nn.MaxPool3d 示例说明
-
Python sklearn.datasets.load_digits 示例说明