D3 Examples - graph annotation - draggable clusters

graph annotation - draggable clusters

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

this iteration that makes the nodes underneath the annotation circles draggable too 🖱🎉

svg.selectAll('.annotation-subject') .style('pointer-events', 'none');

now with support for touch events 🎉

d3.select('body') .on('touchstart', noZoom) .on('touchmove', noZoom) function noZoom() { d3.event.preventDefault(); }

thanks to @autiomaa for pointing out that touch support was missing before 😄

further reading on Event.preventDefault() the at the MDN docs and the w3c spec

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='vis.js'></script>
</body>
</html>
​
    