我正在使用鼠标绘制多边形。我设法使用普通的 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());
就像它所显示的那样,我在 .this、this.parentNode 等
处遇到了问题
那么我应该如何在 Angular 中调用 .this/this.parentNode (在正常的 js 文件中它可以工作)。
因此,当我想在我的 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/