I created three nodes (circles) based on reading some data from a JSON file using D3 Javascript. Here is my code as well as 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 dx; }) .attr("cy", function(d) { return dy; }); }); }); </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 node base that is connected to two other nodes. What I would like to do is when I move the mouse over the node base, the other two nodes that are connected to the node base will be shown. As soon as you pull the mouse out of the node base, the other two nodes will hide. I would be very grateful if you could help me do this. I am new to D3 Javascript and don't know how to encode this part.