title: d3.js How to draw a Force-Directed Graph with nodes grouped by circles
body: <p>I'm doing a community detection project,</p>
  
  <p>I use d3.js to demonstrate the result of the algorithm.</p>
  
  <p>By now I'm using colors on nodes to indicate different community they belongs, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/l3RQc.png" alt="enter image description here"></p>
  
  <p>Since the result is gonna be printed on a paper(black and white only, you know), it's not a good choice to use different colors.</p>
  
  <p>So I would like to draw a graph like this:</p>
  
  <p><img src="https://i.stack.imgur.com/9eM2p.png" alt="enter image description here"></p>
  
  <p>or this:</p>
  
  <p><img src="https://i.stack.imgur.com/eHJAA.png" alt="enter image description here"></p>
  
  <p><strong>I just want to group the nodes with circles.</strong></p>
  
  <p><strong>Can anyone help me? Thank You!</strong></p>