d3-annotation: Encircling Example

Encircling Example

Made with d3.annotation. An example showing how you can dynamically update the annotations on tick with a network graph.

forked from susielu's block: d3-annotation: Encircling Example

<!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'>

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;
      }

</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>

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

https://d3js.org/d3.v4.js

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js