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
Source: stackoverflow.com
Related Query
- Select SVG elements using rectangle select box not working during zoom : d3.js
- Zoom to bounding box of path on externally loaded svg using D3
- Svg semantic zoom not working on SVG in HTML
- Adding image to svg container using d3 not working on FF and Safari
- svg filter not working in mozilla firefox after zoom
- Rotating an SVG image using D3.JS not working
- How to select multiple svg elements using d3js
- SVG filter using d3 js not working in IE
- Bootstrap popovers for SVG elements not working with jQuery 3.0.0
- d3.js Rectangle Zoom Not working
- Adding text to rectangle elements using D3 / SVG
- Using .setAttribute() to Resize SVG not Working
- Drag events not getting fired easily using d3-drag on svg elements
- Title Attribute not working for an SVG Rect on Safari
- d3.js - mouseover event not working properly on svg group
- D3 - Positioning tooltip on SVG element not working
- Svg clip-path within rectangle does not work
- IE11 does not accept SVG height and width when using D3
- $location not working in AngularJS using d3.js
- d3.on("mouseover") event does not work with nested SVG elements
- Using d3.js svg clipPath not clipping in Angular
- d3 zoom not working as in example
- Why are programmatically inserted SVG <tspan> elements not drawn, except with d3.js?
- Elements appended to SVG with D3 are not appearing
- D3 Zoom functionality is not working in Google chrome
- How to get reference to SVG (child) elements nested in another SVG element (parent) using D3?
- Is it possible to not reorder elements when using d3.join?
- Select SVG elements by making a free-hand drawing around them
- Renderer2 does not render SVG element while using d3 js - Angular 4
- D3: Zooming/Panning Line Graph in SVG is not working in Canvas
More Query from same tag
- How to display all circles when none is selected in d3?
- d3 grouped bar chart highlight group on mouseover
- D3.js "Error: Invalid value for <path> attribute" for moving average
- Trying to get circles on map to transition into bars in bar chart with D3
- Simple path transition
- Select/detect the changed elements in d3.js?
- D3 Donut chart projected to sphere/globe
- How to increase time to read d3.json data for large data set and slow networks?
- Margin on the chart in NVD3
- Simultaneous cursors
- Running html/javascript file from a local node.js webserver
- how to change style for a particular path in partition chart (D3.js)
- d3 zoom behavior. Increasing the scale in small increments
- Remove d3 axis transition on initialization
- D3js: small square polygon renders half the map
- repeated y axis values with tickFormat d3
- d3.js v4.9 Get the calculated width of selected element
- D3: Panning along date x axis
- Can I add a moving scale or axis in plots using Vegalite?
- Make the Click event unavailable during animations
- D3 V4 Error: <path> attribute d: Expected number, "MNaN,0LNaN,0LNaN,… scaleLinear().domain().range()
- How to get the x-axis interval using d3.js?
- How to redraw chart : d3.js chaining function and crossfilter filtering
- D3 force layout: Moving arrows along links depending on node radius
- How do I fit these two charts onto one SVG
- D3 Interactive Stream Graph: Data repeating past one month
- How to get the JSON path from element
- Protovis vs D3.js
- D3 - Update single grid line after data change
- how to import d3.js to angular 2?