score:2

Accepted answer

I would suggest you to use getScreenCTM to calculate the translated and scaled point.

So rather than doing this heavy calculation of finding the translated + scaled point (which frankly was very tough to understand!):

tX = tCoords.translate[0];
tY = tCoords.translate[1];
// console.log(tX+translateX +":"+d.x)
if (!d3.select(this).classed("selectedNode") &&
    tX + translateX * scaleX >= d.x && tX + translateX * scaleX <= parseInt(d.x) + parseInt(d.width) &&
    tY + translateY * scaleY >= d.y && tY + translateY * scaleY <= d.y + d.height
)

I would suggest you to use getScreenCTM and make your life easy:

var point = svg.node().createSVGPoint(); //create a point
var ctm = d3.select(this.parentNode).node().getScreenCTM(); //get screen ctm of the group
point.matrixTransform(ctm); //apply the transition + scale to the point
tX = point.matrixTransform(ctm).x; // the new translated+scaled point x
tY = point.matrixTransform(ctm).y; // the new translated+scaled point y
//now do your usual comparison to find selection
if (!d3.select(this).classed("selectedNode") &&
    tX >= d.x && tX <= (parseInt(d.x) + parseInt(d.width)) &&
    tY >= d.y && tY <= (parseInt(d.y) + parseInt(d.height))
) {

working code here


Related Query

More Query from same tag