Question

我使用鼠标绘制多边形。我设法使用普通的javascript文件来完成代码。现在我想在我的打字稿文件中实现相同的东西

这是我的d3.js文件

//D3.JS VERSION 3
//---------------------------
var dragger = d3.behavior.drag()
.on('drag', handleDrag)
.on('dragend', function(d){
    dragging = false;
});


function handleDrag() {
    if(drawing) return;
    var dragCircle = d3.select(this), newPoints = [], circle;
    dragging = true;
    var poly = d3.select(this.parentNode).select('polygon');
    var circles = d3.select(this.parentNode).selectAll('circle');

    for (var i = 0; i < circles[0].length; i++) {
        circle = d3.select(circles[0][i]);
        newPoints.push([circle.attr('cx'), circle.attr('cy')]);
    }
      poly.attr('points', newPoints);

          console.log('newPoints', newPoints);
    dragArea = d3.polygonArea(newPoints);
    console.log('dragArea',dragArea);
     d3.select("#toolTipArea").text('Area = '+dragArea+' sqft');

    dragCircle
    .attr('cx', d3.event.x)
    .attr('cy', d3.event.y)
        .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px").text(""+dragArea+"sqft")})
        .on("mouseout", function(){return tooltip.style("visibility", "visible").text(""+dragArea+"sqft")})
        .on("mouseover", function(){return tooltip.style("visibility", "visible").text(""+dragArea+"sqft")});
        //         .on("mousemove", tooltipMaster(1))
        // .on("mouseout", tooltipMaster(2))
        // .on("mouseover", tooltipMaster(3));

}

此代码在普通的html n js文件中正常工作。
现在我想在我的 angular4 中实现这个代码。但是，我的打字稿文件中遇到了一些问题。我安装了最新的d3.js版本，版本4.

1）第一个问题是

我需要更改我的d3.behavior.drag（）函数，因为它在版本4中不受支持。所以我改为： -

     this.dragger = d3.drag()
         .on("drag", this.handleDrag())
         .on("end", this.endDrag());

2）这是handleDrag（）（这是第二个问题）

就像它显示的那样，我在 .this，this.parentNode等上遇到了问题那么我应该如何在角度中调用 .this / this.parentNode （在正常的js文件中它可以工作）。

3）在以下位置显示此错误：

所以，当我想将普通d3.js函数实现到我的 ts文件中时，我得到了所有这些错误，angular 4 。我需要知道以角度调用的正确方法谢谢。

Answer 1

通过消除()

，确保传递实际的函数而不是函数的返回值

 this.dragger = d3.drag()
     .on("drag", this.handleDrag)
     .on("end", this.endDrag);

对于您的其他问题，请使用(this as any).parentNode将this视为任何对象，以避免打字稿问题。

以角度4实现d3.js.

1 个答案: