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"); 
}