Currently, I have successfully implemented code to draw a polygon using the mouse in a normal JavaScript file. Now, I am looking to replicate the same functionality in my TypeScript file.
Below is an excerpt from my d3.js file:
//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")});
}
The above code functions correctly in a normal HTML and JavaScript setup.
Now, I am trying to incorporate this code into my angular4 project. However, I encountered a few challenges with my TypeScript file. Even after updating to the latest version of d3.js (version 4).
1) The first issue arises with:
To address compatibility issues in version 4, I had to modify the 'd3.behavior.drag()' function as follows:
this.dragger = d3.drag()
.on("drag", this.handleDrag())
.on("end", this.endDrag());
2) There is also an issue with the handleDrag() method, as shown below: https://i.sstatic.net/xMdvz.png
Specifically, dealing with references to '.this' and 'this.parentNode' presents challenges in Angular compared to a standard JS implementation.
3) Another error occurred at: https://i.sstatic.net/h6MIB.png
These errors cropped up while attempting to integrate the traditional d3.js functionality into my TypeScript file within the context of Angular 4. I seek guidance on how to properly handle such calls in an Angular environment.
Thank you.