javascript - 在 Angular 4 中实现 d3.js

标签 javascript angular typescript d3.js svg

我正在使用鼠标绘制多边形。我设法使用普通的 javascript 文件来编写代码。现在我想在我的 typescript 文件中实现同样的事情

这是我的 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 中实现此代码。但是,我的 typescript 文件中遇到了一些问题。我已经安装了最新的 d3.js 版本,版本 4。

1)第一个问题是

我需要更改我的 d3.behavior.drag() 函数,因为版本 4 不支持它。所以我更改为:-

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

2)这是handleDrag()(这是第二个问题) enter image description here

就像它所显示的那样,我在 .this、this.parentNode 等
处遇到了问题 那么我应该如何在 Angular 中调用 .this/this.parentNode (在正常的 js 文件中它可以工作)。

3)显示此错误:- enter image description here


因此,当我想在我的 ts 文件, Angular 4 中实现普通 d3.js 函数时,我遇到了所有这些错误。我需要知道调用 Angular 正确方法。
谢谢。

最佳答案

通过消除 (),确保传递实际的函数,而不是函数的返回值:

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

对于您的其他问题,请使用 (this as any).parentNode 允许将 this 视为任何对象,以避免 typescript 问题。

关于javascript - 在 Angular 4 中实现 d3.js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48294929/

相关文章:

javascript - 使用标题破坏

javascript - 如何在foreach中调用函数?

javascript - 未触发 Facebook 回调

angular - 将范围数据传递到 Angular2 中的 ng-content

angular - 从构建中排除一些惰性模块(Angular5)

javascript - 在 Angular 2 应用程序中注销之前获取最后一个事件 URL

找不到 Angular4.x 模块 : Error: Can't resolve 'classlist.js'

javascript - 使用 karma + babel + webpack 和 bundle 跟踪错误

javascript - 如何处理 ngFor 中输入类型的动态正则表达式值?

包含列表的 Angular2 react 形式