-
Notifications
You must be signed in to change notification settings - Fork 56
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vuejs #44
Comments
Have you solved it? I'm with this issue too |
I am using D3 v5 and Vue.js and I could not get this plugin to work in my project. So I created a context menu using HTML and I love it! It is very easy to create with modern frameworks, like Vue, where you can control the component state easily. This is a sample of my Vue component:
I didn't define all of the properties in the Vue You basically create a context menu from plain HTML and show or hide it using D3 events. You also attach an event listener onto the component that listens for the "contextmenu" event. When a user right-clicks anywhere on the component, you handle that event with the setContextMenuCoords method, which sets the top and left position properties of the context menu. The comments in the code above should help to clarify. I hope that helps. Good luck! |
@SamuelEarl I am trying to implement a context-menu from your solution above, one issue with this solution is when I right click on a node the contextmenu comes up fine, but when I right-click again immediately on an empty area ( where there are no nodes ), the context menu still comes up. It's only when we do a left click that the context-menu goes away. |
How use with ES6 and VueJS ?
Importing
import * as d3 from 'd3'
import contextMenu from 'd3-context-menu'
Init
let d3ContextMenu = contextMenu(d3)
Config
.on('contextmenu', d3ContextMenu([ { title: 'Item #1', action: (elm, d, i) => { console.log('Item #1 clicked!') console.log('The data for this circle is: ' + d) } }, { title: 'Item #2', action: (elm, d, i) => { console.log('You have clicked the second item!') console.log('The data for this circle is: ' + d) } } ]))
My graph work, but nothing on click, just the real right click of the browser...
The text was updated successfully, but these errors were encountered: