Labelled Edges-WithCompleteGraph

by gauravameta

HTML

<head>
  <meta charset="utf-8" />
  <title>Terms Relationship in Standard</title>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    $('#search').on('input', function() {
      var options = $('datalist')[0].options;
      for (var i = 0; i < options.length; i++) {
        if (options[i].value == $(this).val()) {
          alert($(this).val());
          break;
        }
      }
    });

  </script>
</head>

<body>
  <center><h1>
   Ontology based relationship of selected terms from few standards</h1>
  
    

      <table border="1">
        <tr>
          <td align="center" style="width:100px">

            <label class="switch">
                <input type="checkbox" id="checkbx" onclick='ShowAll(this);'>
                <span class="slider round"></span>
                <br><br>Show all
                </label>
          </td>
          <td align="center" style="width:105px">

            <form>
              <input type="text" value="0.4" id="msg" size=4>
            </form><button onclick="getMessage()" id="simibtn">similarity filter</button>
          </td>
          <td align="center" style="width:200px">
            <form>
              <label>&nbsp;&nbsp;&nbsp;&nbsp;search:</label>
              <input type="text" id="search" list="TermSearch" placeholder="Search for term" data-list='{"valueCompletion": true, "highlight": true}' />
              <datalist id="TermSearch">
</datalist>
            </form>
          </td>
        </tr>

      </table>
      </center>
  <center>
  <p id="d3">
  
  </p></center>
  <p id="d3node">

  </p>

  <p id="dom">
  </p>

</body>

CSS

div.tooltip {
  position: absolute;
  text-align: center;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */

.switch input {
  display: none;
}

/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

#d3 { border: 1px solid green;}

JavaScript

var w = 1000;
var h = 800;
var linkDistance = 200;
var edgetype = [];
var nodetype = [];
var nodenames = [];
var datacom = {};
var colors = d3.scale.category10();
var selectednode = -1;
var similimit = 0.4;
//search functionality
$(function() {
  $(document).on('change', 'input', function() {
  //var ckbox = document.getElementById("checkbx");
//ckbox.checked = false;
    var options = $('datalist')[0].options;
    var found = false;
    for (var i = 0; i < options.length++; i++) {
      if (options[i].value == $(this).val()) {
        //alert($(this).val());
        found = true;
        break;
      }
    }
    if (found == true) {
      ind = nodenames.indexOf($(this).val());
      if (ind >=0) {
      var ckbox = document.getElementById("checkbx");
ckbox.checked = false;
        //d3.selectAll('svg').selectAll("*").remove();
        refreshsvg();
        update(getcurrentdata({}, ind));
      }
    }
  })

})
//radio button when on should disable all the other input fields
function ShowAll(cb) {
//var simibox = document.getElementById("msg");
//var simibutn = document.getElementById("simibtn");
  //console.log("Clicked, new value = " + cb.checked);
  //d3.selectAll('svg').selectAll("*").remove();
  refreshsvg();
  if (cb.checked == true) {
    // console.log(datacom);
    
 //   simibox.disabled = true;
 //   simibutn.disabled = true;
    update(getcurrentdata({}, -2));
  } else {
  //var simibox = document.getElementById("msg");
 //   simibox.disabled = false;
 //   simibutn.disabled = false;
    i = Math.floor(Math.random() * datacom.nodes.length);
    //console.log(datacom);
    update(getcurrentdata({}, i));
  }
}

function getMessage() {
var ckbox = document.getElementById("checkbx");
ckbox.checked = false;
  similimit = d3.select("#msg").property("value");
  iid = selectednode;
  //d3.selectAll('svg').selectAll("*").remove();
  refreshsvg();
  //s.remove();
  // console.log(iid);
  update(getcurrentdata({}, iid));
}

function mouseclick(d) {
var ckbox =...