文章目录
  1. 1. 添加 path 事件
    1. 1.1. 基本思路
  2. 2. 结束语

因为业务需要折腾起了图表,《D3.js-Tree 实战笔记》系列用于记录使用该库制作 Tree 图表的一些笔记。本节我们要在 link 连接线上,添加 hover 的样式,和点击事件。

添加 path 事件


基本思路

之前在讲节点悬浮展示信息的时候,也有做过差不多逻辑的事情,这里因为比较简单,也不涉及新的特性,就直接讲讲逻辑吧。

  1. 绑定 mouseout 和 mouseover 事件,给线条加上颜色。
  2. 绑定 click 事件,获取需要的信息,再触发对应的事情。

简单来说,就是这么一小段:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 添加enter操作,添加类名为link的path元素
var linkEnter = link
.enter()
.insert("path", "g")
.attr("class", "link")
// 添加id
.attr("id", d => {
return "textPath" + d.id;
})
.on("mouseover", function(d) {
d3.select(this).style("stroke", "orange");
})
.on("mouseout", function(d) {
d3.select(this).style("stroke", "#CCC");
})
.on("click", d => {
alert(d.parent.data.name + ' -> ' + d.data.name);
})
// 默认位置为当前父节点的位置
.attr("d", function(d) {
var o = {
x: source.x0,
y: source.y0
};
return diagonalReverse(o, o);
});

从上面我们可以知道,绑定事件时,使用this可以获取到当前元素。所以需要注意的是,这里如果使用可箭头函数,可能就拿不到想要的数据了喔。

最终效果如图:
image

结束语


我也不知道为啥这节就这么点内容…只是觉得这个点可以记一下,但是又实在凑不上很多东西了,大家将就看看吧。

此处查看项目代码
此处查看页面效果

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. 添加 path 事件
    1. 1.1. 基本思路
  2. 2. 结束语