D3 Examples - d3-annotation: Encircling Example

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
​
    <style>
    :root {
        --annotation-color: #E8336D;
    }
​
     body{
        background-color: whitesmoke;
     }
​
     svg {
        background-color: white;
        font-family: 'Lato';
     }
​
     line {
       stroke:#eae4e4;
     }
​
      .annotation path {
        stroke: var(--annotation-color);
        fill: rgba(0,0,0,0);
      }
​
      .annotation path.connector-arrow{
        fill: var(--annotation-color);
      }
​
      .annotation text {
        fill: var(--annotation-color);
      }
​
      .annotation-title {
        font-weight: bold;
      }
​
       circle.handle {
        stroke-dasharray: 5;
        stroke: var(--annotation-color);
        fill: rgba(255, 255, 255, .5);
        cursor: move;
​
        stroke-opacity: .4;
      }
​
      circle.handle.highlight {
        stroke-opacity: 1;
      }
        
       .annotation-note-bg {
          fill: rgba(255, 255, 255, 0);
        }
​
    </style>
</head>
<body>
    <svg width=960 height=500></svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
    <script src="index.js"></script>
</body>
</html>
​
    