Question

我有一个已经被mousedown调用过的函数。然后我想调用另一个函数＆＃34;这个＆＃34;是mousedown对象。那我怎么称之为.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");
}

＆＃34;这＆＃34;在＆＃34;选择＆＃34;的背景下function是用户mousedown的对象（在本例中是svg rect）。因此，在我标记为＆＃34;＆lt; - 这是问题＆＃34;它正在使用this.function，但所有正在做的就是选择rect.function。

我怎样才能调用我的功能＆＃34;拖动＆＃34;从这里来？

Answer 1

您可以手动调用回调中的函数，同时将global this和inner this作为输入。

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
       }
    }
}

或

以下“不干”的方式。在start函数内创建一个引用此变量的变量，然后将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"); }

Answer 2

你的构造函数中的

做...

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

这意味着当在所选方法中引用它时，这始终是您的类实例。

Answer 3

您可以进行.on("drag", () => this.dragging))

Angular 2＆amp; d3：当函数存在时如何调用它

3 个答案: