D3 Examples - Collision detection on 1000s of lines

xxxxxxxxxx
 
<!doctype html>
<html>
  <head>
    <title>Measure rtree for feature detection</title>
    <script src="https://unpkg.com/d3@4.4.1"></script>
    <script src="https://unpkg.com/rbush@2.0.1/rbush.min.js"></script>
    <style>
​
    html, body {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
​
    circle {
      fill-opacity: 0.3;
      stroke: #000000;
      stroke-width: 0.5;
    }
    text {
      font-family: sans-serif;
      font-size: 10px;
      fill: #000000;
    }
    .isect {
      fill-opacity: 0.8;
      fill: red;
      stroke: red;
      stroke-width: 0.5;
    }
    .isect.prime {
      fill: green;
    }
​
    .ln {
      stroke-weight: 0.5;
    }
​
    .control {
      position: absolute;
      top: 20px;
      right: 20px;
      padding: 10px 20px;
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      font-weight: 300;
      background: #fff;
      border-radius: 4px;
      box-shadow: 0 0 5px rgba(0,0,0,0.5);
    }
​
    .control h4 {
      font-weight: 300;
    }
​
    .control input[type=number] {
      width: 50px;
    }
    </style>
  </head>
  <body>
    <!-- <div class="control">
      <h4>Remove overlaps on a radial layout</h4>
      <p><label><input id="n" value="30" type="number" min="0" step="1" /> Vertices</label></p>
      <p><label><input id="gap" value="5" type="number" min="0" step="1" max="5" /> Gap (px)</label></p>
      <p><button id="relax">Remove overlaps</button><button id="generate">Generate</button></p>
    </div> -->
    <script src="index.js"></script>
  </body>
</html>
​
    