Angular 2＆d3：当函数存在时如何调用此函数

Question

我有一个在mousedown上调用的函数。然后我想调用另一个函数，但是“this”是mousedown对象。那么我该如何调用this.function？

start() 
{ 
    d3.select(#svgArea) 
     .append("rect") 
     .attr("id", "newRect") 
     .attr("x", 10) 
     .attr("fill", "#FFFFFF") 
     .attr("stroke", "#666666") 
     .attr("y", 10) 
     .attr("width", 250) 
     .attr("height", 100) 
     .on("mousedown",() => { d3.event.stopPropagation(); }) 
     .on("click", function() { d3.event.stopPropagation(); }) 
     .on("mousedown", this.selected) 
     .on("mouseup", this.unselected)); 
} 
selected() 
{ 
    if(d3.event.button == 0) 
    { 

     var box = d3.select(this).node().getBBox(); 
     var Obj = d3.select(this); 
     var Obj2 = d3.select(this).node().parentNode.parentNode; 

     d3.select("#freedraw") 
      .append("rect") 
      .attr("id", "bottomRight") 
      .attr("x", ((box.x + box.width)) + 3) 
      .attr("y", ((box.y + box.height)) + 3) 
      .attr("width", 6) 
      .attr("height", 6) 
      .attr("stroke", "#666666") 
      .attr("fill-opacity", 0) 
      .style("cursor","se-resize"); 

      d3.select("#bottomRight") 
       .call(d3.drag() 
        .on("drag", this.dragging));//<--Here is the issue 
     } 
    } 
} 
dragging() 
{ 
    console.log("dragging"); 
} 

“本”中的“选择”功能的上下文中是对象上的用户鼠标按下（在该实例中是一SVG RECT）。因此，在我标记为“< - 这里是问题”的区域中，它正在使用this.function，但所做的只是选择了rect.function。

如何从这里调用我的函数“拖动”？

Answer 1

在你的构造做...

constructor() { 
    this.selected = this.selected.bind(this); 
} 

这意味着，这始终是你的类的实例时，这是所选择的方法内引用。

Answer 2

您可以手动调用回调中的函数，同时将全局和内部都作为输入。

start() 
{ 
    var that = this; 
    d3.select(#svgArea) 
     .append("rect") 
     .attr("id", "newRect") 
     .attr("x", 10) 
     .attr("fill", "#FFFFFF") 
     .attr("stroke", "#666666") 
     .attr("y", 10) 
     .attr("width", 250) 
     .attr("height", 100) 
     .on("mousedown",() => { d3.event.stopPropagation(); }) 
     .on("click", function() { d3.event.stopPropagation(); }) 
     .on("mousedown", function(){ 
      return that.selected(this, that); 
     }) 
     .on("mouseup", this.unselected)); 
} 

dragging() 
{ 
    console.log("dragging"); 
} 

selected(innerThis, globalThis) 
{ 
    if(d3.event.button == 0) 
    { 

     var box = d3.select(innerThis).node().getBBox(); 
     var Obj = d3.select(innerThis); 
     var Obj2 = d3.select(innerThis).node().parentNode.parentNode; 

     d3.select("#freedraw") 
      .append("rect") 
      .attr("id", "bottomRight") 
      .attr("x", ((box.x + box.width)) + 3) 
      .attr("y", ((box.y + box.height)) + 3) 
      .attr("width", 6) 
      .attr("height", 6) 
      .attr("stroke", "#666666") 
      .attr("fill-opacity", 0) 
      .style("cursor","se-resize"); 

      d3.select("#bottomRight") 
       .call(d3.drag() 
        .on("drag", globalThis.dragging));//<--Here is the issue 
     } 
    } 
} 

OR

下 “不会干” 的方式。 在启动函数中创建一个引用此变量的变量，然后将mousedown事件回调复制到您之前创建的变量的相同范围。这可行，但如果你将在其他地方使用相同的mousedown回调，你将需要重复自己。

start() 
{ 
    var that = this; 
    d3.select(#svgArea) 
     .append("rect") 
     .attr("id", "newRect") 
     .attr("x", 10) 
     .attr("fill", "#FFFFFF") 
     .attr("stroke", "#666666") 
     .attr("y", 10) 
     .attr("width", 250) 
     .attr("height", 100) 
     .on("mousedown",() => { d3.event.stopPropagation(); }) 
     .on("click", function() { d3.event.stopPropagation(); }) 
     .on("mousedown", function(){ 
      if(d3.event.button == 0){ 

      var box = d3.select(this).node().getBBox(); 
      var Obj = d3.select(this); 
      var Obj2 = d3.select(this).node().parentNode.parentNode; 

      d3.select("#freedraw") 
       .append("rect") 
       .attr("id", "bottomRight") 
       .attr("x", ((box.x + box.width)) + 3) 
       .attr("y", ((box.y + box.height)) + 3) 
       .attr("width", 6) 
       .attr("height", 6) 
       .attr("stroke", "#666666") 
       .attr("fill-opacity", 0) 
       .style("cursor","se-resize"); 

       d3.select("#bottomRight") 
        .call(d3.drag() 
        .on("drag", that.dragging));//<--Here is the issue 
      } 
     }) 
    .on("mouseup", this.unselected)); 
} 

dragging() 
{ 
    console.log("dragging"); 
}