title: d3js Force Directed Graph - Click on node to popup infobox which read from JSON
body: <p>I have been working with <a href="https://bl.ocks.org/mbostock/4062045" rel="nofollow noreferrer">Force-Directed Graph</a> but I am still new to D3js and Javascript. </p>
  
  <p>I want to able to click on the node and the infobox popup on the page and print some information about that node (from JSON).</p>
  
  <p>Example of my json file:</p>
  
  <pre><code>{"directed": false, "graph": {}, 
  "nodes": [{"id": 0, "name":"Ant" , "info":"Small Animal"}, 
  {"id": 1 , "name":"Apple" , "info":"Fruit"}, 
  {"id": 2 , "name":"Bat" , "info":"Fly Animal"}, 
  {"id": 3 , "name":"Boat" , "info":"Vehicle"}, 
  {"id": 4 , "name":"Banana" , "info":"Long cute Fruit"}, 
  {"id": 5 , "name":"Cat" , "info":"Best Animal"}], 
  
  "links": [{"source": 0, "target": 0 , "weight":1}, {"source": 0, "target": 2, "weight": 0.3}, 
  {"source": 0, "target": 5, "weight":0.8}, {"source": 1, "target": 1, "weight":1}, 
  {"source": 1, "target": 4, "weight":0.5}, {"source": 2, "target": 2, "weight":1}, 
  {"source": 3, "target": 3, "weight":1}, {"source": 4, "target": 4, "weight":1}, 
  {"source": 5, "target": 5, "weight":1}], 
  "multigraph": false}
  </code></pre>
  
  <p>So when I click on a node. It should popup something like:</p>
  
  <pre><code>Name: Ant
  Info: Small Animal
  Connected to: Bat with 0.3 weight , Cat with 0.8 weight
  </code></pre>
  
  <p>My graph code were pretty much like the example of force-directed that I link above.</p>