Menu
I have created three nodes (circles) based on reading some data from JSON file using D3 Javascript. Here are my code and the JSON file:
<!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>
This is the JSON file:
{
"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
}
]
}
The code works simply as follows: There is a base node that is linked to two other nodes. What I would like to do is when I move the mouse over the base node, the other two nodes that connected to the base node will be displayed. As soon as you move the mouse out of the base node, the other two nodes will hide. I am new to D3 Javascript and do not know how to code this part.
929
You can do this by attaching mouse event handlers to the nodes that set the visibility accordingly. I've taken your example and modified the data slightly so that the node that's triggering these actions has group 2 to be able to identify it.
Then all you need to do is select the other nodes based on the group and set visibility:
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");
}
});
Complete example here.
131
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
