search

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.
https://d3js.org/d3-zoom
ISC License
501 stars 144 forks source link

Zoomable DOM conflict(Angular & D3JS) #233

Closed MUTHUKUMAR73737 closed 3 years ago

MUTHUKUMAR73737 commented 3 years ago

I have implemented vertical bar chart with zoom feature using d3js(inside angular(version - 7.0.1) application).

When I drag inside the chart I am getting below error.

2021-04-01 17_15_31-Window

Sample chart in stackblitz(Working without type-error): https://stackblitz.com/edit/angular-7-zoomable-bar-chart

The above issue is not occurring in the sample app(please see above link).

In angular application when I remove window click event. The above type-error is not occurring even when we drag inside the chart(please see below screenshot)

2021-04-01 17_14_51-Window

The error file in angular application is given below as screenshot.

2021-04-01 17_12_46-Window

Please help me to resolve this issue.

Thanks in anticipation.

Fil commented 3 years ago

Hello, this is a duplicate of https://github.com/d3/d3-zoom/issues/231

MUTHUKUMAR73737 commented 3 years ago

Above issue is resolved by doing code change in the d3-drag(nodrag.js) file.

drag-issue

What I changed(making event listener to bubbling phase i.e false) in my node modules nodrag.js file is selection.on("click.drag", noevent, false)

I knew the above approach is not a correct option to do. Please help me resolve this issue with Capturing Phase

Please help to resolve this issue.

Thanks in anticipation.