d3 v4 force

by sundaramkumar

HTML

<script src="https://underscorejs.org/underscore-min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg width="960" height="600"></svg>

CSS

.link {
  stroke: #cccccc;
  /* opacity: 0.6; */
  stroke-width: 1.5px;
}
.node circle {
  stroke: #000000;
  /* opacity: 0.6; */
  stroke-width: 1.5px;
}
text {
  font: 12px Tahoma;
  /* opacity: 0.6; */
  stroke: #000000;
  pointer-events: none;
}

JavaScript

schemeCategory10  = ["#1f77b4","#ff7f0e","#2ca02c","#d62728","#9467bd","#8c564b","#e377c2","#7f7f7f","#bcbd22","#17becf"]
  schemeCategory20  = ["#1f77b4","#aec7e8","#ff7f0e","#ffbb78","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5","#8c564b","#c49c94","#e377c2","#f7b6d2","#7f7f7f","#c7c7c7","#bcbd22","#dbdb8d","#17becf","#9edae5"];
  schemeCategory20b = ["#393b79","#5254a3","#6b6ecf","#9c9ede","#637939","#8ca252","#b5cf6b","#cedb9c","#8c6d31","#bd9e39","#e7ba52","#e7cb94","#843c39","#ad494a","#d6616b","#e7969c","#7b4173","#a55194","#ce6dbd","#de9ed6"];
  schemeCategory20c = ["#3182bd","#6baed6","#9ecae1","#c6dbef","#e6550d","#fd8d3c","#fdae6b","#fdd0a2","#31a354","#74c476","#a1d99b","#c7e9c0","#756bb1","#9e9ac8","#bcbddc","#dadaeb","#636363","#969696","#bdbdbd","#d9d9d9"]
  
  var color = d3.scaleOrdinal(this.schemeCategory20);      
      var graph={
       nodes :{"details.default (v1)":{},"istio-ingressgateway.istio-system (unknown)":{},"istio-mixer.istio-system (unknown)":{},"istio-policy.istio-system (unknown)":{},"istio-telemetry.istio-system (unknown)":{},"productpage.default (v1)":{},"ratings.default (v1)":{},"reviews.default (v1)":{},"reviews.default (v2)":{},"reviews.default (v3)":{},"unknown (unknown)":{} },
       edges : [{"source":"istio-ingressgateway.istio-system (unknown)","target":"istio-policy.istio-system (unknown)","labels":{"reqs/sec":"0.000000"}},{"source":"reviews.default (v2)","target":"istio-policy.istio-system (unknown)","labels":{"reqs/sec":"0.000000"}},{"source":"istio-ingressgateway.istio-system (unknown)","target":"productpage.default (v1)","labels":{"reqs/sec":"0.000000"}},{"source":"reviews.default (v2)","target":"ratings.default (v1)","labels":{"reqs/sec":"0.000000"}},{"source":"details.default (v1)","target":"istio-telemetry.istio-system (unknown)","labels":{"reqs/sec":"0.000000"}},{"source":"productpage.default (v1)","target":"istio-telemetry.istio-system...