d3 股权穿透图添加鼠标经过效果

最新推荐文章于 2023-05-06 10:24:05 发布

Koreyoshi·

最新推荐文章于 2023-05-06 10:24:05 发布

阅读量219

点赞数

文章标签： javascript 前端 html

原文链接：https://www.dazhuanlan.com/mengxiaoduo/topics/1406255

版权

添加提示框元素

 var tooltip = d3.select("body")
                .append("div")
                .attr("class", "tooltip")
                .style("visibility","hidden");

为点添加交互事件

nodes.on("mouseover", function(d) {// 添加鼠标放在点上的事件
	tooltip.html("关系人：" + d.name + "<br />亲密度：" + d.values)
		.style("left", (d3.event.pageX + 10) + "px")
		.style("top", (d3.event.pageY + 10) + "px")
		// .style("opacity", 1.0);
		.style("visibility", "visible");
});
nodes.on("mousemove", function(d) {// 添加鼠标在点上移动的事件
    tooltip.style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px");
});
nodes.on("mouseout", function() {// 添加鼠标从点上移开的事件
    tooltip.style("visibility","hidden");//style("opacity", 0.0);
});

为线添加交互事件

edges.on("mouseover", function(d) {// 添加鼠标放在线上的事件
    tooltip.html(d.source.name + " > " + d.target.name + "<br />亲密度：" + d.target.values)
        .style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px")
        // .style("opacity", 1.0);
        .style("visibility", "visible");
});
edges.on("mousemove", function(d) {// 添加鼠标在线上移动的事件
    tooltip.style("left", (d3.event.pageX + 10) + "px")
        .style("top", (d3.event.pageY + 10) + "px");
});
edges.on("mouseout", function() {// 添加鼠标从线上移开的事件
    tooltip.style("visibility", "hidden");
});