Implementing d3.js in angular 4

Question

I am drawing polygon by using mouse. I managed to do the code using normal javascript file. Now I want to implement the same thing in my typescript file

This is 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")});
        //         .on("mousemove", tooltipMaster(1))
        // .on("mouseout", tooltipMaster(2))
        // .on("mouseover", tooltipMaster(3));

}

This code work fine in normal html n js file.
Now I want to implement this code in my angular4.But, I got few problems in my typescript file.I have installed the latest d3.js version, version 4.

1)First problem is

I need to change my d3.behavior.drag() function because, it is not supported in version 4. So I changed to:-

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

2)and this is the handleDrag() (which lies the second problem)

Like it shows, I got problem at .this, this.parentNode etc
so how should I call .this/this.parentNode in angular(in normal js file it works).

3)Showing this error at:-

So , I got all this error when I want to implement the normal d3.js function into my ts file , angular 4. I need to know the proper way to call in angular.
Thank you.

Try .on("drag", this.handleDrag) and .on("end", this.endDrag). You should be passing the function, not the return value of the function, (which in this case is void). — Blue
– Blue, Commented Jan 17, 2018 at 6:36
@FrankerZ tq, it looks like my 1st and 3rd problem gone. Now I am still looking for the 2nd problem's solution.. — user3431310
– user3431310, Commented Jan 17, 2018 at 6:39
What does this refer to in that function? Do a console.log(this) and see if you're getting the element. — Blue
– Blue, Commented Jan 17, 2018 at 6:43
when I console.log at my normal js file, I got this, 0: [circle, parentNode: html], so how do I get this data in typescript file? — user3431310
– user3431310, Commented Jan 17, 2018 at 6:49

Blue · Accepted Answer · 2018-01-17 07:28:35Z

1

Make sure you pass the actual function and not the return value of the function, by eliminating the ():

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

For your other issue, use (this as any).parentNode to allow this to be treated as any object to avoid typescript issues.

answered Jan 17, 2018 at 7:28

Blue

23k7 gold badges69 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Implementing d3.js in angular 4

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related