draw connector on two mouse clicks in javascript -


i have below code have dynamically created circles drag-gable. need create connector between 2 drag-gable circles using js. using d3 library. on click co ordinates not sure how proceed further. when 2 clicks on of dynamically created circles 1 connector should created , should drag-gable.

<!doctype html> <html lang="en">     <head>       <meta charset="utf-8">         <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>       <style type="text/css">     .mybutton {     background:#0000ff;     width:40px;     height:40px;     border-radius:20px;     -khtml-user-drag: element;     -webkit-user-drag: element;     }     #root {     background:#ffff00;     }     #service{     background:#00ff00;     }     #divcontainer, #divresize {              border:dashed 1px #ccc;              width:120px;              height:120px;              padding:5px;              margin:5px;              font:13px arial;              cursor:move;              float:left          }      .division{         border:solid 3px #ccc;          width:90%;         height:750px;         float:right;     }            </style>      </head>     <body>         <div id="drawarea" class="division" ></div>         <div id="firstdivision" >         <form id="test2">         <input type="button" id="root" class="mybutton" /> root <p>         <input type="button" id="service" class="mybutton"/ > service<p>         <input type="button" id="action1" class="mybutton" draggable="true"/ > action         </form>         </div>         <canvas id="example" class="division">          </canvas>         <script type="text/javascript">            // create svg canvas           var svg = d3.select("#drawarea")             .append("svg")           .attr("width", 700)           .attr("height", 500);            //drag nodes           var drag = d3.behavior.drag()               .on("dragstart", function() {                   d3.event.sourceevent.stoppropagation();                   d3.select(this).classed("dragging", true);               })               .on("drag", dragmove)               .on("dragend",dragended);            //first circle           var g1 = svg.append("g")             .attr("transform", "translate(" + 150 + "," + 100 + ")")             .attr("class", "first")             .call(drag)             .append("circle").attr({               r: 20,             })             .style("fill", "#ffff00")            //second cicle           var g2 = svg.append("g")             .attr("transform", "translate(" + 250 + "," + 300 + ")")             .attr("class", "second")             .call(drag)             .append("circle").attr({               r: 20,             })             .style("fill", "#00ff00")          svg.on('dblclick', function() {             var coords = d3.mouse(this);             console.log(coords);             drawcircle(coords[0], coords[1]);         });         svg.on('click',function(){             var coords = d3.mouse(this);             var classfirst = d3.select(this).attr("class");             drawconnector(coords[0], coords[1]);         });          //draw connector         function drawconnector(x, y) {         var c=document.getelementbyid("example");         var ctx=c.getcontext("2d");         ctx.beginpath();         ctx.moveto(150,100);         ctx.lineto(250,300);         ctx.stroke();         }          //third circle on click              function drawcircle(x, y) {             var g2 = svg.append("g")             .attr("transform", "translate(" + x + "," + y + ")")             .attr("class", "action")             .call(drag)             .append("circle").attr({               r: 20,             })             .style("fill", "#00f");              }             //drag handler           function dragmove(d) {               var x = d3.event.x;               var y = d3.event.y;               d3.select(this).attr("transform", "translate(" + x + "," + y + ")");               if(d3.select(this).attr("class") == "first") {                 /*line.attr("x1", x);                 line.attr("y1", y);*/                 d3.select(this).attr("cx", x);                 d3.select(this).attr("cy", y);                              } else {                 d3.select(this).attr("cx", x);                 d3.select(this).attr("cy", y);                 /*line.attr("x2", x);                 line.attr("y2", y);*/               }           }      function dragended(d) {     d3.select(this).classed("dragging", false);     }                     </script>     </body> </html> 

g1 , g2 being set circle elements weren't usable without adjustment. can use g1 , g2 translation's of circle containers , use draw line.

// create svg canvas  var svg = d3.select("#drawarea")  .append("svg")  .attr("width", 700)  .attr("height", 500);    //drag nodes  var drag = d3.behavior.drag()  .on("dragstart", function() {    d3.event.sourceevent.stoppropagation();    d3.select(this).classed("dragging", true);  })  .on("drag", dragmove)  .on("dragend", dragended);    // added c1 , c2 below.  g1 , g2 being set circles.    //first circle  var g1 = svg.append("g")  .attr("transform", "translate(" + 150 + "," + 100 + ")")  .attr("class", "first")  .call(drag);  var c1= g1.append("circle").attr({    r: 20,  })  .style("fill", "#ffff00")    //second cicle  var g2 = svg.append("g")  .attr("transform", "translate(" + 250 + "," + 300 + ")")  .attr("class", "second")  .call(drag);  var c2 = g2.append("circle").attr({    r: 20,  })  .style("fill", "#00ff00");    // add line element  var line = svg.append("line")  .attr({x1: 150, y1: 100, x2: 250, y2: 300})  .attr({"stroke-width": 2, stroke: "red"});    svg.on('dblclick', function() {    var coords = d3.mouse(this);    console.log(coords);    drawcircle(coords[0], coords[1]);  });  svg.on('click', function() {    var coords = d3.mouse(this);    var classfirst = d3.select(this).attr("class");    drawconnector(coords[0], coords[1]);  });    //draw connector  function drawconnector(g1, g2) {    // move line transforms of g elements.    var t1 = g1.attr("transform").replace(/[^\d.,]/g, "").split(",");    var t2 = g2.attr("transform").replace(/[^\d.,]/g, "").split(",");    line.attr({x1: t1[0], y1: t1[1], x2: t2[0], y2: t2[1]});  }    //third circle on click       function drawcircle(x, y) {    var g2 = svg.append("g")    .attr("transform", "translate(" + x + "," + y + ")")    .attr("class", "action")    .call(drag)    .append("circle").attr({      r: 20,    })    .style("fill", "#00f");  }      //drag handler  function dragmove(d) {    var x = d3.event.x;    var y = d3.event.y;    d3.select(this).attr("transform", "translate(" + x + "," + y + ")");    if (d3.select(this).attr("class") == "first") {      /*line.attr("x1", x);               line.attr("y1", y);*/      d3.select(this).attr("cx", x);      d3.select(this).attr("cy", y);    } else {      d3.select(this).attr("cx", x);      d3.select(this).attr("cy", y);      /*line.attr("x2", x);               line.attr("y2", y);*/    }    drawconnector(g1, g2);  }    function dragended(d) {    d3.select(this).classed("dragging", false);  }
.mybutton {    background: #0000ff;    width: 40px;    height: 40px;    border-radius: 20px;    -khtml-user-drag: element;    -webkit-user-drag: element;  }  #root {    background: #ffff00;  }  #service {    background: #00ff00;  }  #divcontainer,  #divresize {    border: dashed 1px #ccc;    width: 120px;    height: 120px;    padding: 5px;    margin: 5px;    font: 13px arial;    cursor: move;    float: left  }  .division {    border: solid 3px #ccc;    width: 90%;    height: 750px;    float: right;  }
<!doctype html>  <html lang="en">    <head>    <meta charset="utf-8">    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>    </head>    <body>    <div id="drawarea" class="division"></div>    <div id="firstdivision">      <form id="test2">        <input type="button" id="root" class="mybutton" />root        <p>          <input type="button" id="service" class="mybutton" />service          <p>            <input type="button" id="action1" class="mybutton" draggable="true" />action      </form>    </div>    <canvas id="example" class="division"></canvas>  </body>    </html>


Comments

Popular posts from this blog

java - UnknownEntityTypeException: Unable to locate persister (Hibernate 5.0) -

python - ValueError: empty vocabulary; perhaps the documents only contain stop words -

ubuntu - collect2: fatal error: ld terminated with signal 9 [Killed] -