my ip1

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Setting Attribute Values from Data</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-zoom/1.7.1/d3-zoom.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>

    <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
    
		<style type="text/css">
			
			body {
				background-color: #ddddff;
			}
			svg {
				background-color: white;
			}

</style>
	</head>
	<body>

var y = d3.scale.linear()
  .domain([0, height])
  .range([0, height]);

var zoombehavior = d3.behavior.zoom().x(x).y(y).scaleExtent([1, Infinity]).on("zoom", zoom);

var svg = d3.select("body")
						.append("svg")
						.attr("width", width)
						.attr("height", height)
            .append("g")
            .call(zoombehavior);

svg.select("#"+"edgesg").remove();
//               drawfilteredges(edgesdata,nodename);
              svg.append( "g" ).attr("id","edgesg").selectAll( "links" )
                   .data( edgesdata )
                   .enter()
                   .append("path")
                   .attr("class","links")
                   .attr("d", function(d){return link(d)})
                   .style( "stroke-width" , "3px" )
                   .style( "stroke" , function(d,i){return svg.select("#" + d.target.replace(".", "_"))["0"]["0"].attributes[4].value} )
                   .style("fill","transparent")
                   .style( "opacity" , "0.5" )
      //              .on( "mouseover" , edgemouseover )
      //              .on( "mouseout" , edgemouseout )
                   .append("svg:title")
                   .text(function(d) { return d.source + " "+ d.target; });
         //}// if(clickednodes_check && zooming)
              
      }
      function dragged(d) {
                d3.select(this).attr("x",this.x.animVal["0"].value + d3.event.dx);
      }
      function dragstart(d) {
 				 d3.select(this).style("fill", "red");
        //console.log(d)
        if(semanticzoomone) sel_chr=d;
			}
      function dragend(d,i) {
           				
//                 console.log(chrnames+ "     "+ this.id + "    "+chrnames.indexOf(this.id) );
        d3.select(this).style("fill", "black");
           				var id= this.id; var ind=chrnames.indexOf(this.id);
           				var currxpos=null, nextxpos=null,prevxpos=null;
                  if(ind!=-1)currxpos=xposarr[ind];
           				if(ind+1 <4 )nextxpos = xposarr[ind];
           				if(ind-1 >=0 )prevxpos = xposarr[ind-1]; 
                  if(nextxpos&& this.x.animVal["0"].value > nextxpos){
                    swap(chrnames,ind, ind+1);
                    console.log(chrnames);
                    columntext();
                  }
           				else if(prevxpos&& this.x.animVal["0"].value < prevxpos){
                    swap(chrnames,ind-1, ind);
                    console.log(chrnames);
                    columntext();
                  } 
         				  else{
                    columntext();
                  }
        }
     
      function swap(arr, p1,p2){
        var temp = arr[p1];
        arr[p1]= arr[p2];
        arr[p2]=temp;
      }
      var xposarr=[175,350,525,700];
      function columntext(){
        svg.selectAll("#colt").remove(); 
				svg.append("g").attr("id","colt")
           					.selectAll("text")
							      .data(chrnames)
								    .enter()
                    .append("text")
                    .attr("x", function(d,i){return (onecolumnwidth/3)+onecolumnwidth*(i) + (rectwidth/2)})
                    .attr("y", function(d,i){return (heightgap/4)+(onerectheight+heightgap)*(noofchr-1) + (onerectheight)+15})
                     .attr("id",function(d){return d})
                     .call(d3.behavior.drag()
                         .on("drag", dragged)
                         .on("dragstart", dragstart) 
                         .on("dragend", dragend)
                      )
                    .style("text-anchor", "middle")
                    .style("font-size", "22px")
                    .style("font-weight", "800")
                    .attr("fill", function(d,i){return colorarr[i]})
                    .style("text-anchor", "middle")
                    .text(function(d){ return d})   
      }
      
      
      function returnpos(chrname, number,scale){
        return (d3.scale.linear().domain([1,chrlengths[chrname]])
                          .range([1,onerectheight*scale])(number));
      }
      var genetochr={};
      
      function transform(d) {
        var to= svg.select("#" + d.Chr)["0"]["0"].attributes[8].value;
        t=to.slice(9, to.length);
        var xv= +t.slice(1, t.indexOf(","))
        var yv= +t.slice( t.indexOf(",")+1,t.indexOf(")"));        
				return "translate(" + (xv+1) + "," + ( (yv)+returnpos(d.Chr, d.Start,zoombehavior.scale()) ) + ")";
      }

function transformblock(d){
          return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1)) + "," 
                    + y((heightgap/4)+(onerectheight+heightgap)*(d.j-1)) + ")" 
                    + "scale(" + [1,zoombehavior.scale()] +  ")";
      }
      function transformblocktext(d){
             return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1) + (rectwidth+5)) + "," 
                    + y((heightgap/4)+(onerectheight+heightgap)*(d.j-1) + (onerectheight/2)+10) + ")" 
                    + "scale(" + [1,1] +  ")" ;
      }
      function transforms(d) {
        var to= svg.select("#" + d.Chr)["0"]["0"].attributes[8].value;
        t=to.slice(9, to.length);
        var xv= +t.slice(1, t.indexOf(","))
        var yv= +t.slice( t.indexOf(",")+1,t.indexOf(")"));

if(genetodna[d.Chr] == sel_chr) return "translate(" + (xv+1) + "," + ( (yv)+returnpos(d.Chr, d.Start,zoombehavior.scale()) ) + ")";
          else return "translate(" + (xv+1) + "," + ( (yv)+returnpos(d.Chr, d.Start,1) ) + ")";        
      }

function transformblocks(d){        
          if(genetodna[d.name] == sel_chr) return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1)) + "," 
                    + y((heightgap/4)+(onerectheight+heightgap)*(d.j-1)) + ")" 
                    + "scale(" + [1,zoombehavior.scale()] +  ")";
          else return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1)) + "," 
                    + ((heightgap/4)+(onerectheight+heightgap)*(d.j-1)) + ")" 
                    + "scale(" + [1,1] +  ")";

}
      function transformblocktexts(d){
          if(genetodna[d.name] == sel_chr) return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1) + (rectwidth+5)) + "," + y((heightgap/4)+(onerectheight+heightgap)*(d.j-1) + (onerectheight/2)+10) + ")" 
                    + "scale(" + [1,1] +  ")" ;
          else return "translate(" + ((onecolumnwidth/3)+onecolumnwidth*(d.i-1) + (rectwidth+5)) + "," + ((heightgap/4)+(onerectheight+heightgap)*(d.j-1) + (onerectheight/2)+10) + ")" 
                    + "scale(" + [1,1] +  ")" ;
      }

var text;
-
      d3.tsv("Temp.csv", function(data) { //Anomolies
        //console.log(data);
//          data.forEach(d => {           
//           // if(d.Chr == "hv1H") console.log(d.Chr);
//          });
//        text= svg.append("g").selectAll("rect")
// 					.data(data)
// 					.enter()
// 					.append("rect")
//           .attr("id", function(d,i){genetochr[d.Gene]=genetodna[d.Chr]; return d.Gene.replace(".", "_");})
//           .attr("transform",transform)
// 					.attr("width", function(d) {
// 						return rectwidth-2;
// 					})
// 					.attr("height", function(d,i) {
//           			return returnpos(d.Chr, d.End - d.Start,zoombehavior.scale());                        
//            })
//           .attr("fill", function(d,i){return svg.select("#" + d.Chr)["0"]["0"].attributes[5].value})
//           .attr("fill-opacity", 0.51);
  
  text= svg.append("g").selectAll("rect")
					.data(data)
					.enter()
					.append("rect")
  				.attrs(function(d, i) { 
                  genetochr[d.Gene]=genetodna[d.Chr];
    							return { 
                          id: d.Gene.replace(".", "_"),
                          transform:transform(d) ,
                          width:rectwidth-2,
                          height: returnpos(d.Chr, d.End - d.Start,zoombehavior.scale()),
                          fill: svg.select("#" + d.Chr)["0"]["0"].attributes[5].value,
                          "fill-opacity": 0.51
                         }; 
           });
 
  
  
  
//           
         text2=text.append("svg:title")
          .text(function(d) { return d.Gene; });
        
//         svg.append( "g" )
//           .append("path")
//         .attr("class","links")
//           .attr("d", drawl())
//           .style( "stroke-width" , "5px" )
//           .style( "stroke" , "red" )
//         .style("fill","transparent")
        
        d3.csv("edges.tsv", function(data) {   
          edgesdata=data;
          svg.append( "g" ).attr("id","edgesg").selectAll( "links" )
             .data( edgesdata )
             .enter()
             .append("path")
          	 .attrs(function(d, i) { 
    							return { 
                          class: "links",
                          d: link(d),                    			
                          opacity:0.8,
                    			stroke:svg.select("#" + d.target.replace(".", "_"))["0"]["0"].attributes[4].value,
                    			fill:"transparent",
                    			"stroke-width":"3px",
                          title:d.source                          
                         }; 
           })
          .styles(function(d, i) { 
                  return{
                    
                  }
          });
 
          
          
//              .attr("class","links")
//              .attr("d", function(d){return link(d)})
//              .style( "stroke-width" , "3px" )
//              .style( "stroke" , function(d,i){            
// //             					return "yellow";
//                    return svg.select("#" + d.target.replace(".", "_"))["0"]["0"].attributes[4].value
//           })
//              .style("fill","transparent")
//              .style( "opacity" , "0.5" )
// //              .on( "mouseover" , edgemouseover )
// //              .on( "mouseout" , edgemouseout )
//              .append("svg:title")
//    					 .text(function(d) { return d.source + " "+ d.target; });

//           svg.select("#" + "edgesg").moveToBack();
          //console.log(genetochr)
          
        });
        
      });
      
      
      // https://github.com/wbkd/d3-extended
    d3.selection.prototype.moveToFront = function() {  
      return this.each(function(){
        this.parentNode.appendChild(this);
      });
    };
    d3.selection.prototype.moveToBack = function() {  
        return this.each(function() { 
            var firstChild = this.parentNode.firstChild; 
            if (firstChild) { 
                this.parentNode.insertBefore(this, firstChild); 
            } 
        });
    };
      function drawl(){
        var curvature = .6;
        var x0 = 320 ,
            x1 = 550 ,
            xi = d3.interpolateNumber( x0 , x1 ) ,
            x2 = xi( curvature ) ,
            x3 = xi(1 - curvature) ,
            y0 = 350,
            y1 =  200;
            return "M" + x0 + "," + y0
                + "C" + x2 + "," + y0
                + " " + x3 + "," + y1
                + " " + x1 + "," + y1;
      }
      var curvature = .7;
			function link(d)
      {      
//         console.log(svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.f);  
        var source_col_index = chrnames.indexOf(genetochr[d.source]);
        var target_col_index = chrnames.indexOf(genetochr[d.target]);       
        console.log(d);console.log(source_col_index + " "+ target_col_index)
        console.log(svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.e)
        if(Math.abs(target_col_index- source_col_index) >1) return;
          if(source_col_index < target_col_index){              
              var x0 = +(svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.e) +rectwidth-1 ,
                  x1 = +(svg.select("#" + d.target.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.e)-1,
                  xi = d3.interpolateNumber( x0 , x1 ) ,
                  x2 = xi( curvature ) ,
                  x3 = xi(1 - curvature) ,
                  y0 = svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.f,
                  y1 = svg.select("#" + d.target.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.f ;
                  return "M" + x0 + "," + y0
                      + "C" + x2 + "," + y0
                      + " " + x3 + "," + y1
                      + " " + x1 + "," + y1;
          }
        else if(source_col_index < target_col_index){              
              var x0 = +(svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.e)-1 ,
                  x1 = +(svg.select("#" + d.target.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.e) +rectwidth-1,
                  xi = d3.interpolateNumber( x0 , x1 ) ,
                  x2 = xi( curvature ) ,
                  x3 = xi(1 - curvature) ,
                  y0 = svg.select("#" + d.source.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.f ,
                  y1 = svg.select("#" + d.target.replace(".", "_"))["0"]["0"].transform.animVal["0"].matrix.f ;
                  return "M" + x0 + "," + y0
                      + "C" + x2 + "," + y0
                      + " " + x3 + "," + y1
                      + " " + x1 + "," + y1;
          }
        }
//       function transform2(d) {
//         var to= svg.select("#" + d)["0"]["0"].attributes[8].value;
//         t=to.slice(9, to.length);
//         var xv= +t.slice(1, t.indexOf(","))
//         var yv= +t.slice( t.indexOf(",")+1,t.indexOf(")")+0)
//           if(d=="hv1H")console.log(svg.select("#" + d)["0"]["0"].attributes[8].value);
// //         console.log(d+ " "+to+"     "+t+ "     " +xv+ "      "+ yv);
//         setTimeout(function() {
//         svg.select("#" + d).attr("transform" ,"translate(" + (xv) + ","
//                                   + y(yv)+")" + "scale(" + [1,zoombehavior.scale()] +  ")");

//         if(d=="hv1H")console.log("------- " + yv);
//           if(d=="hv1H")console.log(svg.select("#" + d)["0"]["0"].attributes[8].value);
//           },1);
// //         return "translate(" + (svg.select("#" + d.Chr)["0"]["0"].x.animVal.value + 1) + "," 
// //                           + y(svg.select("#" + d.Chr)["0"]["0"].y.animVal.value+                       
// //                                             returnpos(d.Chr, d.Start)) + ")";
//       }
		</script>

</body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

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

https://d3js.org/d3-drag.v1.min.js

https://cdnjs.cloudflare.com/ajax/libs/d3-zoom/1.7.1/d3-zoom.js

https://code.jquery.com/jquery-1.11.3.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.js

https://d3js.org/d3-selection-multi.v1.min.js