Angular 2 & d3: How to call this when function this exists

Question

I have a function which has been called on mousedown. Then I want to call another function however "this" is the mousedown object. So How do I call 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");
}

"this" in the context of the "selected" function is the object that the user mousedown on (which in this instance is a svg rect). Therefore in the area I have marked as "<--Here is the issue" it is using this.function, but all that is doing is selecting rect.function.

how can i call my function "dragging" from here?

Answer 1

You can manually call the functions inside the callback with giving both global this and inner this as inputs.

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

The following "not DRY" way. Make a variable that refers to this inside the start function then copy the mousedown events callback to the same scope with the variable that you've created earlier. This works but if you will use the same mousedown callback somewhere else you will need to repeat yourself.

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