D3 Examples - my ip1

xxxxxxxxxx
 
<!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://d3js.org/d3-drag.v1.min.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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/js/bootstrap-toggle.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-toggle/2.2.2/css/bootstrap-toggle.css" /> -->
    <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>
<!--     <div class="btn-group">
  <button class="btn btn-danger btn-xs dropdown-toggle" type="button" data-toggle="dropdown" style="    position: absolute; height:50px"> Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Zooming <input id="zooming" class="checkbox checkbox-danger"  type="checkbox" unchecked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 3px;" ></a></li>
    <li><a href="#">Semantic Zooming <input id="zooming" class="checkbox checkbox-danger"  type="checkbox" checked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 3px;" ></a></li>
    <li><a href="#">Selected Zooming <input id="zooming" class="checkbox checkbox-danger"  type="checkbox" unchecked data-toggle="toggle" data-size="small" style= "border-color: #d43f3a;  border-width: 3px;" ></a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul> -->
​
​
        <script type="text/javascript"> 
//       $(".dropdown-menu li a").click(function(){
//         console.log("ddd")
//   $(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
//   $(this).parents(".dropdown").find('.btn').val($(this).data('value'));
// });
    var width = 700;
    var height = 700;  
    var heightgap=20;//gap between columns rect
      
      var semanticzoom=true,semanticzoomone=false;var sel_chr="WheatA";
      var x = d3.scale.linear()
  .domain([0, width])
  .range([0, width]);
​
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);
​
      var noofcolumns=4;
      var noofchr=7;
      var onecolumnwidth = width/noofcolumns;
      var rectwidth=onecolumnwidth/4;
      var onerectheight=  (height/noofchr)-heightgap;
      
      var edgesdata;
      
      var colorarr={1:"rgb(233, 71, 44)", 2:"rgb(34, 91, 154)", 3:"rgb(255, 182, 18)", 4:"rgb(19, 72, 45)"};
      
      var rectmap= { 11:"hv1H", 12:"hv2H", 13:"hv3H",14:"hv4H",15:"hv5H",16:"hv6H",17:"hv7H", 
                    21:"ta1A", 22:"ta2A", 23:"ta3A",24:"ta4A",25:"ta5A",26:"ta6A",27:"ta7A",
                   31:"ta1B", 32:"ta2B", 33:"ta3B",34:"ta4B",35:"ta5B",36:"ta6B",37:"ta7B",
                   41:"ta1D", 42:"ta2D", 43:"ta3D",44:"ta4D",45:"ta5D",46:"ta6D",47:"ta7D"};
      
      var blockdata= [ {"i":1,j:1, "name":"hv1H"}, {"i":1,j:2, "name":"hv2H"}, {"i":1,j:3, "name":"hv3H"},{"i":1,j:4, "name":"hv4H"},{"i":1,j:5, "name":"hv5H"},{"i":1,j:6, "name":"hv6H"},{"i":1,j:7, "name":"hv7H"}, 
{"i":2,j:1, "name":"ta1A"}, {"i":2,j:2, "name":"ta2A"}, {"i":2,j:3, "name":"ta3A"},{"i":2,j:4, "name":"ta4A"},{"i":2,j:5, "name":"ta5A"},{"i":2,j:6, "name":"ta6A"},{"i":2,j:7, "name":"ta7A"},
{"i":3,j:1, "name":"ta1B"}, {"i":3,j:2, "name":"ta2B"}, {"i":3,j:3, "name":"ta3B"},{"i":3,j:4, "name":"ta4B"},{"i":3,j:5, "name":"ta5B"},{"i":3,j:6, "name":"ta6B"},{"i":3,j:7, "name":"ta7B"},
{"i":4,j:1, "name":"ta1D"}, {"i":4,j:2, "name":"ta2D"}, {"i":4,j:3, "name":"ta3D"},{"i":4,j:4, "name":"ta4D"},{"i":4,j:5, "name":"ta5D"},{"i":4,j:6, "name":"ta6D"},{"i":4,j:7, "name":"ta7D"}];
      
​
      
      var chrnames=[ "Barley", "WheatA", "WheatB", "WheatD"];
      
      var chrlengths={"ta1A":   594102056,
"ta2A": 780798557,"ta3A":   750843639,"ta4A":   744588157,
"ta5A": 709773743,"ta6A":   618079260,"ta7A":   736706236,
"ta1B": 689851870,"ta2B":   801256715,"ta3B":   830829764,
"ta4B": 673617499,"ta5B":   713149757,"ta6B":   720988478,
"ta7B": 750620385,"ta1D":   495453186,"ta2D":   651852609,
"ta3D": 615552423,"ta4D":   509857067,"ta5D":   566080677,
"ta6D": 473592718,"ta7D":   638686055,"hv1H":   558535432,
"hv2H": 768075024,"hv3H":   699711114,"hv4H":   647060158,
"hv5H": 670030160,"hv6H":   583380513,"hv7H":   657224000};
      
      var genetodna={"ta1A":    "WheatA",
"ta2A": "WheatA","ta3A":    "WheatA","ta4A":    "WheatA",
"ta5A": "WheatA","ta6A":    "WheatA","ta7A":    "WheatA",
"ta1B": "WheatB","ta2B":    "WheatB","ta3B":    "WheatB",
"ta4B": "WheatB","ta5B":    "WheatB","ta6B":    "WheatB",
"ta7B": "WheatB","ta1D":    "WheatD","ta2D":    "WheatD",
"ta3D": "WheatD","ta4D":    "WheatD","ta5D":    "WheatD",
"ta6D": "WheatD","ta7D":    "WheatD","hv1H":    "Barley",
"hv2H": "Barley","hv3H":    "Barley","hv4H":    "Barley",
"hv5H": "Barley","hv6H":    "Barley","hv7H":    "Barley"};
      
//       var linearScale = d3.scale.linear()
//                           .domain([1,657224000])
//                           .range([0,100]);
     // console.log(linearScale(65718376) + "   "+ linearScale(657183564))
//        console.log(d3.scale.linear().domain([1,chrlengths["hv1H"]])
//                            .range([1,onerectheight])(2) );
      
      
      
//       for (var i =1;i<=noofcolumns;i++){
//         for (var j=1;j<=noofchr;j++){
//           var c = ""+i+j;//console.log(c);
          //console.log(rectmap[+c])
           svg.append("g")                 .selectAll("rect")
                                .data(blockdata)
                                .enter()
                .append("rect")
                .attr("id", function(d){return rectmap[+(""+d.i+d.j)]})              
//               .attr("x", (onecolumnwidth/3)+onecolumnwidth*(i-1))
//               .attr("y", (heightgap/4)+(onerectheight+heightgap)*(j-1))
              .attr("width", rectwidth)
              .attr("height", onerectheight)
              .attr("fill", "transparent" )
              .attr("fill-opacity", 0.5)
              .attr("stroke", function(d){return colorarr[d.i]})
              .attr("stroke-opacity", 1)
              .attr("class","blocks")
              .attr("transform",transformblock);
      
      
           svg.append("g").selectAll("text")
                                 .data(blockdata)
                                   .enter()
                   .append("text")
                        .attr("transform",transformblocktext)
                  .attr("class","blocktext")
                  .style("text-anchor", "start")
                  .style("z-index", "1000")
                  .text(function(d){ return d.name}) ;  
        //}
         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})          
      //}
      
//       for (var i =1;i<=noofcolumns;i++){
//         for (var j=1;j<=noofchr;j++){
//           var c = ""+i+j;//console.log(c);
//           //console.log(rectmap[+c])
//            svg.append("rect")
//               .attr("id", rectmap[+c])              
// //               .attr("x", (onecolumnwidth/3)+onecolumnwidth*(i-1))
// //               .attr("y", (heightgap/4)+(onerectheight+heightgap)*(j-1))
//               .attr("width", rectwidth)
//               .attr("height", onerectheight)
//               .attr("fill", "transparent" )
//               .attr("fill-opacity", 0.5)
//               .attr("stroke", function(d){return colorarr[i]})
//               .attr("stroke-opacity", 1)
//               .attr("class","blocks")
//               .attr("transform","translate(" + x((onecolumnwidth/3)+onecolumnwidth*(i-1)) + "," 
//                     + y((heightgap/4)+(onerectheight+heightgap)*(j-1)) + ")" 
//                     + "scale(" + [1,zoombehavior.scale()] +  ")");
          
//            svg.append("text")
//           .attr("x", (onecolumnwidth/3)+onecolumnwidth*(i-1) + (rectwidth+5))
//           .attr("y", (heightgap/4)+(onerectheight+heightgap)*(j-1) + (onerectheight/2)+10)
//           .style("text-anchor", "start")
//           .style("z-index", "1000")
//           .text(function(d){ return rectmap[+c]}) ;  
//         }
//          svg.append("g").attr("id","colt").append("text")
//           .attr("x", (onecolumnwidth/3)+onecolumnwidth*(i-1) + (rectwidth/2))
//           .attr("y", (heightgap/4)+(onerectheight+heightgap)*(noofchr-1) + (onerectheight)+15)
//            .attr("id",chrnames[i-1])
//            .call(d3.behavior.drag()
//                .on("drag", dragged)
//                .on("dragstart", dragstart) 
//                .on("dragend", dragend)
//             )
//           .style("text-anchor", "middle")
//           .text(function(d){ return chrnames[i-1]})          
//       }
           function zoom() {
      //          console.log("zzzz" + zoombehavior.translate());
//           if(clickednodes_check && (zooming || semanticzoom || semanticzoomone)){    
              if(semanticzoomone){
                svg.selectAll(".blocks").attr("transform", transformblocks);
                svg.selectAll(".blocktext").attr("transform", transformblocktexts);
                text.attr("transform", transforms);
              }
              else if(semanticzoom){
                svg.selectAll(".blocks").attr("transform", transformblock);
                svg.selectAll(".blocktext").attr("transform", transformblocktext);
                text.attr("transform", transform);
              }
​
              
              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>
    