Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
angelflight
Frequent Visitor

Issue implementing a context menu

I am trying to add a context menu to my visual, and I'm using the example provided here:

 

https://github.com/microsoft/PowerBI-visuals/blob/gh-pages/tutorials/building-bar-chart/adding-conte...

 

 svg.on('contextmenu', () => {
const mouseEvent: MouseEvent = d3.event as MouseEvent;
const eventTarget: EventTarget = mouseEvent.target;
let dataPoint = d3.select(eventTarget).datum();
this.selectionManager.showContextMenu(dataPoint ? dataPoint.selectionId : {}, {
x: mouseEvent.clientX,
y: mouseEvent.clientY
});
mouseEvent.preventDefault();
});

I am getting this error referring to the use of eventTarget in the d3.select:

 

angelflight_0-1599785229322.png

 

 TS2769: No overload matches this call.
Overload 1 of 2, '(selector: string): Selection<BaseType, unknown, HTMLElement, any>', gave the following error.
Argument of type 'EventTarget' is not assignable to parameter of type 'string'.
Overload 2 of 2, '(node: BaseType): Selection<BaseType, unknown, null, undefined>', gave the following error.
Argument of type 'EventTarget' is not assignable to parameter of type 'BaseType'.
Type 'EventTarget' is missing the following properties from type 'Window': applicationCache, clientInformation, closed, customElements, and 221 more. 

'

Any help/guidance would be appreciated....

 

Thanks,

 

Stephan

3 REPLIES 3
dm-p
Super User
Super User

Hi @angelflight,

Try casting your eventTarget to d3.BaseType, e.g.:

let dataPoint = d3.select(<d3.BaseType>eventTarget).datum();

Here's the pointer to a working example in one of my visuals for context.

Regards,

Daniel

 




Did I answer your question? Mark my post as a solution!

Proud to be a Super User!


My course: Introduction to Developing Power BI Visuals


On how to ask a technical question, if you really want an answer (courtesy of SQLBI)




Thank you @dm-p and @Greg_Deckler for your suggestions. Neither quite worked for me. Pardon my lack of experience, but EventTarget does not appear to have any attributes, leading me to think one needs to use that reference in some selector to get at the attributes. Setting the type like this let dataPoint = d3.select(<d3.BaseType>eventTarget).datum(); worked somewhat, but then dataPoint did not have a selectionId attribute. Seems like d3.select wants the selector to be a string. Ultimately, I solved the problem by cheating. Since I only want one context menu to appear no matter where the user clicks, I hard-coded the reference:

 

svg.on('contextmenu', () => {
const mouseEvent: MouseEvent = d3.event as MouseEvent;
let dataPoint: any = d3.select("svg").datum();
this.selectionManager.showContextMenu(dataPoint ? dataPoint.selectionId : {}, {
x: mouseEvent.clientX,
y: mouseEvent.clientY
});
mouseEvent.preventDefault();
});

 

Thanks again for your help!

Greg_Deckler
Super User
Super User

@angelflight  If I am reading that right, it's a type mistmatch situation. eventTarget is an EventTarget object and not a string. My guess is that you need to access an attribute of eventTarget like eventTarget.attribute ?


@ me in replies or I'll lose your thread!!!
Instead of a Kudo, please vote for this idea
Become an expert!: Enterprise DNA
External Tools: MSHGQM
YouTube Channel!: Microsoft Hates Greg
Latest book!:
Mastering Power BI 2nd Edition

DAX is easy, CALCULATE makes DAX hard...

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.