title: How to show and hides nodes when you move the mouse over a node in D3 Javascript
body: <p>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: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;/head&gt;
  &lt;style&gt;
  
  .node {
  stroke: #fff;
  stroke-width: 1.5px;
  }
  
  .link {
  stroke: #999;
  stroke-opacity: .6;
  }
  
  &lt;/style&gt;
  &lt;body&gt;
  &lt;script type="text/javascript" src="d3.v3.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  
  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; });
  });
  });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the JSON file: </p>
  
  <pre><code>{
  "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
      }
  ]
  }
  </code></pre>
  
  <p>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.  </p>