title: How to make d3.js force layout gravity rectangular?
body: <p>In d3.js force layout, giving a gravity value makes layout circular.</p>
  
  <p><a href="https://i.stack.imgur.com/JKJ4w.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JKJ4w.png" alt="enter image description here"></a>
  However, I'd like to make force layout rectangular, while nodes have a negative charge and <strong>even distance</strong>. (like above)</p>
  
  <p>Is there any way to make force layout rectangular?</p>
  
  <p>Can I achieve this by modifying tick function?</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var background = d3.select('.background');
  
  var width = background.node().getBoundingClientRect().width,
   height = background.node().getBoundingClientRect().height;
  
  var nodes = d3.range(50).map(function(d, i) {
    return {
          text: "Hello"
    };
   });
  
  var messages = background.selectAll('.message')
   .data(nodes)
   .enter()
    .append('div')
    .attr('class', 'message')
    .text(d =&gt; d.text)
    .each(function(d, i) {
     d.width = this.getBoundingClientRect().width;
     d.height = this.getBoundingClientRect().height;
    });
  
  var force = d3.layout.force()
   .gravity(1/88)
   .charge(-50)
   .nodes(nodes)
   .size([width, height]);
  
  messages.call(force.drag);
  
  force.on('tick', function(e) {
   messages.each(d =&gt; {
    d.x = Math.max(0, Math.min(width - d.width, d.x));
    d.y = Math.max(0, Math.min(height - d.height, d.y));
   });
   
   messages.style('left', d =&gt; `${d.x}px`)
    .style('top', d =&gt; `${d.y}px`);
  });
  
  force.start();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    padding: 0;
    margin: 0;
  }
  .background {
    width: 100%;
    height: 100vh;
    border: 1px solid #007aff;
  }
  .message {
    display: inline-block;
    font-family: sans-serif;
    border-radius: 100vh;
    color: white;
    padding: 10px;
    background-color: #007aff;
    position: absolute;
  }
  .boundary {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div class="background"&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>