Question

拖放实用程序：需要开发具有节点和连接器的树结构。使用工具栏（手动创建）手动绘制节点和连接器。在节点和连接器上需要生成事件。使用角度js。请提供示例代码。

点击节点后，节点将在一个分区中创建，连接器可以图形方式用于节点之间的连接。

Answer 1

I have achieved this with d3 library which seems to be very useful.

Below is answer:
<div id="drawArea" class="division" ></div>
        <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()
              })
              .on("drag", dragmove);



          //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 circle
          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]);
        });
function drawCircle(x, y) {
            var g2 = svg.append("g")
            .attr("transform", "translate(" + x + "," + y + ")")
            .attr("class", "third")
            .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);
              }
          }

        </script>

拖动树的下拉实用程序（节点和连接器），需要有节点和连接器的句柄来生成事件。 - 角JS

1 个答案: