Security News
Weekly Downloads Now Available in npm Package Search Results
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
d3-context-menu
Advanced tools
A plugin for d3.js that allows you to easily use context menus in your visualizations.
This is a plugin for d3.js that allows you to easy use context-menus in your visualizations. It's 100% d3 based and done in the "d3 way", so you don't need to worry about including additional frameworks.
It's written to be very light weight and customizable. You can see it in action here:
http://plnkr.co/edit/hAx36JQhb0RsvVn7TomS?p=info
bower install d3-context-menu
// Define your menu
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);
}
}
]
var data = [1, 2, 3];
var g = d3.select('body').append('svg')
.attr('width', 200)
.attr('height', 400)
.append('g');
g.selectAll('circles')
.data(data)
.enter()
.append('circle')
.attr('r', 30)
.attr('fill', 'steelblue')
.attr('cx', function(d) {
return 100;
})
.attr('cy', function(d) {
return d * 100;
})
.on('contextmenu', d3.contextMenu(menu)); // attach menu to element
});
Menus can have Headers and Dividers. To specify a header simply don't define an "action" property. To specify a divider, simply add a "divider: true" property to the menu item, and it'll be considered a divider. Example menu definition:
var menu = [
{
title: 'Header',
},
{
title: 'Normal item',
action: function() {}
},
{
divider: true
},
{
title: 'Last item',
action: function() {}
}
];
Menus can have Nested Menu. To specify a nested menu, simply add "children" property. Children has item of array.
var menu = [
{
title: 'Parent',
children: [
{
title: 'Child',
children: [
{
// header
title: 'Grand-Child1'
},
{
// normal
title: 'Grand-Child2',
action: function() {}
},
{
// divider
divider: true
},
{
// disable
title: 'Grand-Child3',
action: function() {}
}
]
}
]
},
];
See the index.htm file in the example folder to see this in action.
You can pass in a callback that will be executed before the context menu appears. This can be useful if you need something to close tooltips or perform some other task before the menu appears:
...
.on('contextmenu', d3.contextMenu(menu, function() {
console.log('Quick! Before the menu appears!');
})); // attach menu to element
You can pass in a callback that will be executed after the context menu appears using the onClose option:
...
.on('contextmenu', d3.contextMenu(menu, {
onOpen: function() {
console.log('Quick! Before the menu appears!');
},
onClose: function() {
console.log('Menu has been closed.');
}
})); // attach menu to element
You can use information from your context in menu names, simply specify a function for title which returns a string:
var menu = [
{
title: function(d) {
return 'Delete circle '+d.circleName;
},
action: function(d, i) {
// delete it
}
},
{
title: function(d) {
return 'Item 2';
},
action: function(d, i) {
// do nothing interesting
}
}
];
// Menu shown is:
[Delete Circle MyCircle]
[Item 2]
You can also have different lists of menu items for different nodes if menu
is a function:
var menu = function(data) {
if (data.x > 100) {
return [{
title: 'Item #1',
action: function(d, i) {
console.log('Item #1 clicked!');
console.log('The data for this circle is: ' + d);
}
}];
} else {
return [{
title: 'Item #1',
action: function(d, i) {
console.log('Item #1 clicked!');
console.log('The data for this circle is: ' + d);
}
}, {
title: 'Item #2',
action: function(d, i) {
console.log('Item #2 clicked!');
console.log('The data for this circle is: ' + d);
}
}];
}
};
// Menu shown for nodes with x < 100 contains 1 item, while other nodes have 2 menu items
The following example shows how to add a right click menu to a tree diagram:
http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=info
Default position can be overwritten by providing a position
option (either object or function returning an object):
...
.on('contextmenu', d3.contextMenu(menu, {
onOpen: function() {
...
},
onClose: function() {
...
},
position: {
top: 100,
left: 200
}
})); // attach menu to element
or
...
.on('contextmenu', d3.contextMenu(menu, {
onOpen: function() {
...
},
onClose: function() {
...
},
position: function(d, i) {
var elm = this;
var bounds = elm.getBoundingClientRect();
// eg. align bottom-left
return {
top: bounds.top + bounds.height,
left: bounds.left
}
}
})); // attach menu to element
d3.contextMenu(menu, {
...
theme: 'my-awesome-theme'
});
or
d3.contextMenu(menu, {
...
theme: function () {
if (foo) {
return 'my-foo-theme';
}
else {
return 'my-awesome-theme';
}
}
});
d3.contextMenu('close');
The following example shows how to add a right click menu to a tree diagram:
http://plnkr.co/edit/bDBe0xGX1mCLzqYGOqOS?p=info
d3-context-menu-theme
)theme
configuration option (as string or function returning string)data
and index
, and this
argument refers to the DOM element the context menu is related to)position
, menu
) have the same signature and this
object as onClose
/onOpen
mousedown
outside of the menu, instead of click
outside (to mimic behaviour of the native context menu)disabled
and divider
can now be functions as well and have the same signature and this
object as explained aboved3.contextMenu('close');
<body>
click event is never removedonClose
callback was called when menu was closed as a result of clicking outsideFAQs
A plugin for d3.js that allows you to easily use context menus in your visualizations.
The npm package d3-context-menu receives a total of 888 weekly downloads. As such, d3-context-menu popularity was classified as not popular.
We found that d3-context-menu demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.