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();
    };
};

0 ответов

Другие вопросы по тегам