d3.js v4 dragging zoomed elements jumping mouse

d3.js v4

by Chetan Hanumantha

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js"></script>
<script src="https://d3js.org/d3.v4.js"></script>

CSS

html,
body {
  margin: 0;
  padding: 0;
  height: 100% !important;
}

.links polyline {
  stroke: black;
  stroke-opacity: 1;
  z-index: 100;
}

.links .invis {
  stroke: #FFF;
  stroke-opacity: 0;
}

.node {
  position: absolute;
  border-color: black;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 5px;
  /*resize: both;
    overflow: hidden;*/
}

.nodeheader {}

.rootNode {
  position: absolute;
  border-color: black;
  border-style: solid;
  border-width: 1.5px;
  border-radius: 5px;
  /*resize: both;
  overflow: hidden;*/
  width: 450px;
  height: 275px;
}

.container {
  width: 100%;
  height: 100%;
}

.node-verticalheader {
  writing-mode: vertical-rl;
}

.node-rightleft {
  writing-mode: vertical-rl;
}

.nodeDrag {
  position: absolute;
  background-color: transparent;
  width: 100%;
  cursor: all-scroll;
}

.node-ports {}

.node.hovered {
  border-color: #E72E3D;
}

.text {
  fill: black;
  font: 10px sans-serif;
  text-anchor: end;
}

.simulation {
  position: absolute;
  pointer-events: none;
}

table {
  border: none;
  border-collapse: collapse;
}

td,
tr {
  padding: 0;
  margin: 0;
}

svg {}

.ui-icon {
  background-image: url("") !important;
}

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 800px;
  border: 3px solid #73AD21;
  background-color: #CCCCCCFF;
  z-index: 9999;
}

JavaScript

//constants for the network visualisation
var height = window.innerHeight - 20; //fullsize svg
var width = window.innerWidth - 20;

var nodes = [{
  "id": "RootNode",
  "group": 0
}, {
  "id": "Node1",
  "ip_adresses": [{
    "ip_adress": "aa.bbb.114.80/28"
  }],
  "group": 1
}, {
  "id": "Node2",
  "ip_adresses": [{
    "ip_adress": "aa.bbb.117.96/28"
  }],
  "group": 1
}, {
  "id": "Node3",
  "ip_adresses": [{
    "ip_adress": "eeee:ffff:400:3001::7"
  }, {
    "ip_adress": "eeee:ffff:400:3001::8"
  }, {
    "ip_adress": "eeee:ffff:400:3001::9"
  }, {
    "ip_adress": "eeee:ffff:400:3001::10"
  }, {
    "ip_adress": "eeee:ffff:400:3001::11"
  }, {
    "ip_adress": "eeee:ffff:400:3001::12"
  }, {
    "ip_adress": "eeee:ffff:400:3001::13"
  }, {
    "ip_adress": "eeee:ffff:400:3001::14"
  }, {
    "ip_adress": "eeee:ffff:400:3001::15"
  }, {
    "ip_adress": "eeee:ffff:400:3001::16"
  }, {
    "ip_adress": "eeee:ffff:400:3001::17"
  }],
  "group": 1
}, {
  "id": "Node4",
  "ip_adresses": [{
    "ip_adress": "cc.dd38.151"
  }, {
    "ip_adress": "cc.dd38.152"
  }],
  "group": 1
}, {
  "id": "Node5",
  "ip_adresses": [{
    "ip_adress": "aa.bbb.114.36"
  }, {
    "ip_adress": "aa.bbb.114.37"
  }],
  "group": 1
}];

var links = [{
  "source": "RootNode",
  "target": "Node1",
  "value": 140
}, {
  "source": "RootNode",
  "target": "Node2",
  "value": 140
}, {
  "source": "RootNode",
  "target": "Node3",
  "value": 140
}, {
  "source": "RootNode",
  "target": "Node4",
  "value": 140
}, {
  "source": "RootNode",
  "target": "Node5",
  "value": 140
}];

var color = d3.scaleOrdinal(d3.schemeCategory10);

//creating and configuring the d3 force-directed graph simulation
var simulation = d3.forceSimulation()
  .force("charge", d3.forceManyBody().strength(-2000))
  .force("center", d3.forceCenter(width / 2, height / 2))
  .force("link", d3.forceLink()
    .distance(function(d) {
      return d.value;
    })
    .strength(1.3).id(function(d) {
      return d.id;
   ...