NoneD 3-context-menu на пользовательское событие
Я работаю с плагином d3-context-menu в моем приложении d3 force graph и хочу открыть контекстные меню для различных событий. Для открытия правой кнопкой мыши по узлам, которые я использую
,on('contextmenu', contextMenu(menu))
который работает просто отлично. Тем не менее, я также хочу, чтобы меню открывалось, когда
- перетаскивание ссылки с одного узла на другой и освобождение
- открыть меню на основе json-ответа от бэкэнда и использовать его в качестве поля выбора
Для выпадающего меню drag'n я пробовал следующее:
.on('mouseup', function(d,i) {
if (selected_node !== mouseup_node) {
contextMenu(menu);
}
})
но это не работает Как вызвать меню из моего ответа бэкэнда, у меня пока нет понятия. Это JS для меню:
contextMenuOne = function (menu, openCallback) {
// create the div element that will hold the context menu
d3.selectAll('.d3-context-menu').data([1])
.enter()
.append('div')
.attr('class', 'd3-context-menu');
// close menu
d3.select('#graphDiv').on('click.d3-context-menu', function() {
d3.select('.d3-context-menu').style('display', 'none');
});
// this gets executed when a contextmenu event occurs
return function(data, index) {
var elm = this;
d3.selectAll('.d3-context-menu').html('');
var list = d3.selectAll('.d3-context-menu').append('ul');
list.selectAll('li').data(menu).enter()
.append('li')
.html(function(d) {
return d.title;
})
.on('click', function(d, i) {
d.action(elm, data, index);
d3.select('.d3-context-menu').style('display', 'none');
});
// the openCallback allows an action to fire before the menu is displayed
// an example usage would be closing a tooltip
if (openCallback) openCallback(data, index);
// display context menu
d3.select('.d3-context-menu')
.style('left', (d3.event.pageX - 2) + 'px')
.style('top', (d3.event.pageY - 2) + 'px')
.style('display', 'block');
d3.event.preventDefault();
};
};