如何在D3Javascript中将鼠标移动到节点上时显示和隐藏节点
How to show and hides nodes when you move the mouse over a node in D3 Javascript
我使用D3Javascript从JSON文件中读取一些数据,创建了三个节点(圆圈)。以下是我的代码和JSON文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<script type="text/javascript" src="d3.v3.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("input.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>
这是JSON文件:
{
"nodes": [
{
"name": "A",
"group": 1
},
{
"name": "B",
"group": 1
},
{
"name": "C",
"group": 1
}
],
"links": [
{
"source": 0,
"target": 1,
"value": 2
},
{
"source": 0,
"target": 2,
"value": 2
}
]
}
代码的工作原理如下:有一个基节点链接到另外两个节点。我想做的是,当我将鼠标移动到基础节点上时,将显示连接到基础节点的其他两个节点。只要将鼠标移出基本节点,其他两个节点就会隐藏起来。我是D3Javascript的新手,不知道如何编写这部分代码。
您可以通过将鼠标事件处理程序附加到相应设置可见性的节点来实现这一点。我举了你的例子,稍微修改了数据,这样触发这些操作的节点就有了第2组来识别它
然后,您所需要做的就是根据组选择其他节点并设置可见性:
var node = svg
.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d) { return color(d.group); })
.call(force.drag)
.style("visibility", function (d) {
return d.group === 1 ? "hidden" : "visible";
})
.on("mouseover", function (d) {
if (d.group === 2) {
node.filter(function (d) { return d.group === 1; })
.style("visibility", "visible");
}
})
.on("mouseout", function (d) {
if (d.group === 2) {
node.filter(function (d) { return d.group === 1; })
.style("visibility", "hidden");
}
});
请在此处完成示例。
相关文章:
- 节点.js将变量显示为 HTML
- 如何在 JStree 3 中显示叶节点的类似文件的图标
- 使用模型创建实例显示'不是函数'(节点使用猫鼬)
- 从显示节点关系的csv文件中获取连接节点的数量
- Javascript:显示/隐藏HTML节点
- 回调返回响应,但当在API中发送时,响应在节点JS中显示为空白
- 使用节点下载高图表数据,但不在浏览器中显示
- 如何在D3Javascript中单击节点时显示和隐藏链接和节点
- 如何在返回后将状态保持为突出显示JQuery树视图的选定节点
- 如何在D3Javascript中将鼠标移动到节点上时显示和隐藏节点
- 节点.js显示在本地主机上,但不在同一台机器上的http上显示
- 节点.js 使用 Multer 上传图像显示未定义
- 如何在Vis JS有向图中逐个显示节点
- 打开 d3 树布局,通过在搜索框中键入 request 来显示用户搜索的节点
- 突出显示一组节点及其之间的关系
- Arbor js - 将鼠标移到节点上时,将节点 ID 显示为文本
- 节点检查器/Chrome 实例不显示源文件、调用堆栈、任何内容
- 如何在 Arbor js 中将鼠标悬停在节点上时显示节点的标签
- 根据来自后端的子节点显示表行
- 为什么不'DOM样式节点显示样式表应用的样式