title: Show social graph with D3 force layout
body: <p>I want to show a social graph with D3(Date-Driven-Documents) with <strong>three hundred nodes</strong></p>
  
  <p>The Json data looks like this.</p>
  
  <pre><code>{
    "nodes":[
  {"name":"node1","group":1},
  {"name":"node2","group":1},
  {"name":"node3","group":1},
  {"name":"node4","group":2},
  {"name":"node5","group":2},
  {"name":"node6","group":2}
  ],
  "links":[
  {"source":1,"target":0,"value":1},
  {"source":2,"target":0,"value":1},
  {"source":1,"target":2,"value":1},
  {"source":3,"target":4,"value":1},
  {"source":3,"target":5,"value":1},
  {"source":4,"target":5,"value":1},
  {"source":1,"target":3,"value":1}
  ]
  }
  </code></pre>
  
  <p>Now I meet several problems</p>
  
  <ol>
  <li><p>When I use node.append("image") for every node ,the fps is so low (just like pause and skip)!</p></li>
  <li><p>The graph always goes far away from center , after I use the d3.layout.force().charge(whatever number).distance(10).charge(-100).size([width,height])</p></li>
  <li><p>Now I want to show a social graph with groups , nodes have profile_image and name ! how to make my graph clear ? Need a lot of advise and examples ,Thanks!</p></li>
  </ol>