patorjk / d3-context-menu Goto Github PK

As of now require doesn't work for d3. Your can see related github issue. The easiest solution would be to use import instead

WARNING in ./src/app/components/chart.js
803:49-63 "export 'contextMenu' (imported as 'd3') was not found in 'd3'

Here i used d3 whole package and also d3-context-menu package

Is it possible to nest menu items? Say I want two top level options Select and Deselect. Clicking on each would reveal a submenu with attributes to select or deselect by. Is this supported and if so could an example be provided? Cant seem to get this use case to work.

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...

Have any idea on how to integrate this into a typescript project?

I am trying to create Context Sensitive Menu given in example menus, But it prints code

I'm struggling to have it mocked when using with vue.js

My component imports the lib like

import * d3ContextMenu as from 'd3-context-menu'

d3-context-menu have supported menu title by word. I think it will be more user-friendly if it can append image( png or svg ). Thanks!

Using the following code for bootstrapping the contextMenu, with d3 v4, webpack v4, and babel v7:

import * as d3 from 'd3';
import contextMenu from 'd3-context-menu';
d3.contextMenu = contextMenu(d3);

I'm receiving the following error:

Uncaught TypeError: Cannot read property 'pageX' of null
    at Object.contextMenu (d3-context-menu.js:170)

Peeking into the code:

				// display context menu
				d3.select('.d3-context-menu')
					.style('left', (position ? position.left : d3.event.pageX - 2) + 'px')
					.style('top', (position ? position.top : d3.event.pageY - 2) + 'px')
					.style('display', 'block');

In v4, d3.event is null until an actual event is defined, thus the error. I'm expecting a simple guard to check to ensure d3.event will suffice to get things working with v4.

Thanks in advance!

I saw the 1.0.1 release note has this Context menu now closes on mousedown outside of the menu, instead of click outside (to mimic behaviour of the native context menu). It doesn't work for me. I also made sure the simulation was stopped thinking something might be capturing my click. What could be happening?

When I left click outside nothing happens, when I right click outside it opens the google chrome menu and the context menu dissapears but I'd like to have this working on a left click outside,

Could you please provide an example on how to use this with React JS ?

I would like to be able to attach the menu to the SVG, so that I could right click on the blank areas of the d3 SVG versus an element on the SVG.

Is this already doable and I can't find the example?

I tried to import the library using

import 'd3-context-menu'

But then the object d3.contextMenu refers to null

Do I do this wrong ?

Thanks

Hi,

when I make a bower install I have the following error:
bower d3-context-menu#0.1.1 ENORESTARGET No version found that was able to satisfy 0.1.1

Same with:
bower install d3-context-menu

Maybe it's a version problem because bower.json contains 0.1.1 and npm contains 0.1.2.

One thing that would be nice is support for headers and dividers, similar to bootstrap: http://getbootstrap.com/components/#dropdowns-divider

I'm not sure how to approach this, or if it even makes sense passing decorative html elements via the json menu. Maybe something like support for multiple "types": action, header, and divider.

For now, I think my only solution is to programmatically inject a list-item and define a custom class for it.

Any thoughts? Thanks.

It is able to create menu like list below?

1. show detail
2. operations
   i. delete
   ii. update info

i want to write the HTML code in this link http://bl.ocks.org/d3noob/8375092 with lightning components. Any example or sample code please help if anybody has done anything like that

Hi,
I am trying the steps you posted in github.
But, it's not working in d3v4 and angular2 (typescript).
When, I right click, the menu details append to bottom of the page?
Can you help me out these?
Thanks...

I am trying to use d3v5 dagre-d3 and d3-context-menu .

"d3": "^5.16.0",
"d3-context-menu": "^1.1.2",
"dagre-d3": "^0.6.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"

d3-context-menu.dew.js:122 Uncaught TypeError: d3.selectAll is not a function
at SVGGElement. (VM990 d3-context-menu.dew.js:122)
at SVGGElement. (VM1310 d3-selection.dew.js:722)
(anonymous) @ d3-context-menu.dew.js:122
(anonymous) @ d3-selection.dew.js:722

Here is the plunker to reproduce the problem.

https://plnkr.co/edit/t4CKN9IaBvO35uKd

Please let me know if you require other info.

hi
using d3 v5 and reactjs and d3-context-menu
I'm receiving the following error:

TypeError: Cannot read property 'pageX' of null

import * as d3 from "d3";
import contextMenuFactory from "d3-context-menu";
 let contextMenu = contextMenuFactory(d3);
      var menu = [
        {
          title: "Item #1",
          action: function(d, i) {
            console.log("Item #1 clicked!");
            console.log("The data for this circle is: " + d);
          },
          disabled: false // optional, defaults to false
        },
        {
          title: "Item #2",
          action: function(d, i) {
            console.log("You have clicked the second item!");
            console.log("The data for this circle is: " + d);
          }
        }
      ];
      svgContextMenu.selectAll("g").on("contextmenu", contextMenu(menu));

D3 6.0 changed event handling logics (see D3 6.0 migration guide), will you consider upgrading?

In D3 6.x the global d3.event has been removed, so in order to access event information from the context menu callbacks I think it would be useful to add the event as a second input parameter, in addition to the datum d.
Is this something you are willing to add?

Is it possible to have more control in the title of a menu item, to inject html ? For example, I would like to add svg shapes to each of the items before their title.

Thanks

Hello Pat,

According to you, what we would be the best way to use the context-menu into an Angular app ?
For instance I'd like to use Angular directives as titles.

Regards

does the context-menu support left mouse click? It would be great for such a use case

I want to add an Id attribute for the menu item.
Is there any way to add Id to the menu item respected " li " Item"

http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=info

Ubuntu Mozilla Firefox 78.0.2

Cookie “plnkr.access_token” will be soon rejected because it has the “sameSite” attribute set to “none” or an invalid value, without the “secure” attribute. To know more about the “sameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite hAx36JQhb0RsvVn7TomS

This page uses the non standard property “zoom”. Consider using calc() in the relevant property values, or using “transform” along with “transform-origin: 0 0”. hAx36JQhb0RsvVn7TomS

The resource at “https://www.google-analytics.com/analytics.js” was blocked because content blocking is enabled.
hAx36JQhb0RsvVn7TomS

Uncaught (in promise) Error: No available storage method found.
    n https://cdn.plnkr.co/build/v1.0.0-243-g51e3baf/0437413f03c257522678.js:38

When my svg is zoomable, and you pan your shapes outside of the original rectangle, the context menu no longer appears.

I modified the demo plnkr to make the svg zoom and pan.

http://plnkr.co/edit/bT8QqG1J4glEtrTJRCax?p=preview

When you start, the menu is available by right clicking the circles. If you pan the diagram, the menu is no longer available. If you pan to locate the shapes back to their original location they are clickable. Drag the shapes up and the context menu is lost from the top circle, but not the bottom.

The menu seems to be available only within the boundaries where the group should be if not transformed.

I am guessing that the contextmenu in the example is placed on the group (g), not on the svg, and that I should have some sort of hidden background element.

Has anyone got advice for sorting this out?

Thanks

Kevin

Can we integrate context menu for touch devices?

If context menu element is not contained within the DOM element used for full screen mode, certain browsers (such as Firefox) just won't show it. Perhaps, d3-context-menu could be enhanced to allow the specification of a selector (as an option) so that the context menu be inserted in that container instead.

Hello,

Is it possible to call some function to prevent the menu disappearing after clicking on it ? I would like to add checkboxes to the menu but right now the menu window is closing after any click.

Thanks

I am trying to implement a list on right click of a data node. d3-context-menu plugin is perfect for my requirements. But when I tried to use it in my code, the library is not working. When i right click on the data node, it won't give me a menu and instead an extra scroll bar gets added to the page. When I tried to debug the behavior I noticed that the div element with class "d3-context-menu" is outside the body tag. I feel that could be the reason of list not appearing. The plugin is working on the background and is not visible.

I followed this example : [http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=preview]
My code looks like this:

eventGroup = focusClip.selectAll(".event").data(data);
eventGroupEnter = eventGroup.enter().append("svg");
// Event Group
            eventGroup
                .attr("class", "event")
                .attr("x", function (d) { return parseInt(x(d.time)) - 10; }) // offset for the bg and center of dot
                .attr("y", function (d) { return parseInt(y(d.plotY)); })
                .attr("width", function (d) { return parseInt((d.label.length / 2)) + 60 + "em";})
                .attr("height", "20");

            // Background
            eventGroup.select("rect")
                .attr("x", 0) // removes the "<rect> attribute x: Expected length, 'NaN'" Error
                .attr("y", 4)
                .attr("width", "100%")
                .attr("height", "12")
                .attr("fill", "url(#event-bg)");

            menu = [{
                title: "Item #1"
            }];
            // Dot
            eventGroup.select("circle")
                .attr("class", "dot")
                .attr("r", 4)
                .attr("cx", 10)
                .attr("cy", 10)
                .attr("fill", function(d) { return d.evtColor ? d.evtColor : "#229ae5"; })
                .attr("stroke", function(d) { return d.evtColor ? d.evtColor : "#229ae5"; })
                .attr("stroke-width", 2)
                .on("contextmenu", d3.contextMenu(menu, function() {
                    console.log("Quick! Before the menu appears!");
                }))
                .on("mouseenter", tooltip.mouseover)
                .on("mouseleave", tooltip.mouseout)
                .on("click", annotateBox.click);

I am trying to get the list on the dot element. So when i right click on the dot, the menu should appear. Currently, when I right click on the dot, an extra scroll bar appears and even the console message is displayed but the list is not visible.

Using d3.v3.min.js

Get error when include your js file. (See Firebug snapshot for details)

ReferenceError: d3 is not defined
d3.contextMenu = function (menu, openCallback) {

It is quite a strange error because d3 does exist, though contextMenu is undefined for d3. I fixed it by simply changing d3.contextMenu = function (menu, openCallback) {...} to var contextMenu = function (menu, openCallback) {..} and then accordingly calling .on('contextmenu', contextMenu(menu)); on my node.enter().

When i set version explicitly(1.0.1 or 1.0.x) i get an error on bower update, works with '*' tho.
Screenshot - http://puu.sh/zeiH1/ade3bb8b9a.png

Is there a way to import d3-context-menu using es6 import statements?

Hello guys,

I want to add an image to some titles of the context-menu, but I dont know how
Can anyone help me?

I tried something like this:

var menu = [
{title: 'MyItem',
icon: 'C:...\Desktop\Pics\f.png',
action: function (elm, d, i) {...}
},

I hope you can help me.

Best regards!

My application was installed with latest d3-context-menu which is 1.0.1. Unfortunately, context menu has stopped working and doesn't spit any errors.

Verified with previous versions, worked alright!

I tried passing following kind of function for disabled:

var menu = [
                {
                    title: 'Open',
                    action: function(elm, d, i) {
                        console.log('You have clicked OPEN item!');
                        console.log('The data for this node is: ' + d.id);
                    },
                    disabled: function(d) {
                        console.log(d);
                        console.log('> '+(d.id == 0));
                        return (d.id == 0);
                    }
                }
            ];

But it is always disabling the item, I only want to disable menu item for Root Node of the array. How can this be implemented, if anyone has ideas?

I'm looking for a way to populate a dynamic context menu in a callback ajax call.
I mean i found a method to create dynamic numbers of row(li) but it works on modyfing directly the DOM element and i don't think is a good practice especially because i have to add an hanlder function click for every element of menu.
So i don't understand reading all requests and issues if the object menu in
.on('contextmenu',d3.contextMenu(menu,...must only be instantiated before contextMenu function called.

It would be useful to have an optional closeCallback so I can reclass nodes that are no longer selected. The closeCallback would be called when the menu is dismissed or when an action is clicked.

I'm having trouble getting this to work with more than one menu item. With multiple items the default right-click menu appears.

(I'm running it on a Macbook Pro, Yosemite, and Chrome.)

Any thoughts?

Thanks.

When i am trying to use the latest version , i am receiving an error
SyntaxError: Expected token ')'
06:08:52 at /app/bower_components/d3-context-menu/js/d3-context-menu.js:149

I want to use the previous version 1.0.2. I want to keep my version fixed to 1.0.2. But since no tag is there i am not able to do so. Can you please release a tag for 1.0.2