Question

您好我正在使用带有angular5的d3并且我已创建节点以创建Circle并且在我的打字稿中我使用node.call（d3.drag（）{}）以及node和mouseMove（）中的mouseDown（）事件和mouseUp（），但此代码将绑定拖动事件与节点，不允许触发mouseDown（）和mouseUP（）。场景如下。

视图部分应该有节点列表，我们可以在一个节点中使用mouseDown（）事件在这些节点之间创建链接，并在另一个节点中拖动line和mouseUp（）事件来创建链接。
在另一种情况下，节点可以使用mousedown + cntrl和mouseMove（）以及mouseUp（）来拖动。

问题在于，如果我使用

 node.call(d3.drag()
      .on("drag", function (d) {
        if (d3.event.sourceEvent.ctrlKey) {
          simulation.stop();
          d.x += d3.event.dx
          d.y += d3.event.dy
          var svgWidth = $("#taxonomy-svg").width();
          var svgHeight = $("#taxonomy-svg").height();
          if (d.x < 40) {
            d.x = 40;
            $("#taxonomy-svg").css("left", (d.x - 40) + "px");
            $("#taxonomy-svg").width(width + 5);
          }
          if ((d.x + 40) > svgWidth) {
            $("#taxonomy-svg").width(d.x + 40);
          }
          if (d.y < 40) {
            d.y = 40;
            $("#taxonomy-svg").height(svgHeight + 5);
            $("#taxonomy-svg").css("top", (d.y - 40) + "px");
          }
          if ((d.y + 40) > svgHeight) {
            $("#taxonomy-svg").height(d.y + 40);
          }


          drawline();
          resetMouseVars();
        }
      })
      .on("end", function (d) {
        $('#taxonomyloader').unbind('mousemove');
        if (d3.event.sourceEvent.ctrlKey) {
          var termid = d3.select(this).attr("id");
          var termid1 = termid.split("s");
          for (var tt = 0; tt < nodes.length; tt++) {
            if (nodes[tt].id == termid1[1]) {
              d.x += d3.event.dx
              d.y += d3.event.dy
              nodes[tt].x = d.x;
              nodes[tt].y = d.y;
              break;
            }
          }
          sendHttpRequestTerm(nodes[tt], "PUT");
        }
      }));

它始终调用drag并且永远不会调用mouseDown（）和mouseMove（），这应该在创建行时调用。

Answer 1

为了达到这个目的，你将不得不做一些事情。

您需要注册keydown事件以侦听按下的ctrl。
您需要注册mousedown事件并致电d3.event.stopPropagation()以防止当前正在按下触发拖动ctrl。
注册keyup事件并清除您在keydown

D3拖动.call（）不允许我们触发mouseup和mousedown

1 个答案: