Question

我有以下代码，我动态创建了可拖动的圆圈。我需要使用js在两个可拖动的圆圈之间创建一个连接器。我正在使用d3库。点击我得到坐标但不知道如何进一步。当两次点击任何动态创建的圆圈时，应该创建一个连接器，它也应该是可拖动的。

<!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 a 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>

在javascript中两次鼠标点击绘制连接器

0 个答案: