Дерево D3 и позиционирование JQuery UI Dialog с узлами

Question

У меня есть дерево D3, и мне нужно расположить JQuery UI Dialog рядом с узлом при щелчке правой кнопкой мыши.

Позиция диалога не работает с $( "#dialog" ).dialog('option', 'position', [d.x,d.y]);

var nodeEnter = node.enter().append("g")
    .attr("class", "node")
    .attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on("click", click)
    .on('contextmenu', function(d) {
        d3.event.preventDefault();
        $('#dialog').dialog('option', 'title', d.name);
        $("#dialog").dialog('option', 'position', [d.x, d.y]);
        $('#dialog').dialog('open');
    });

Остальные биты работают, только не позиция. Есть идеи? Я бы хотел, чтобы диалоговое окно отображалось слева от узла, по которому щелкнули правой кнопкой мыши.

1010 * скрипка *

Answer 1

Позиция, переданная в jQuery dialog, измеряется от верхнего левого угла текущего представления (независимо от количества прокрутки).Я очень сомневаюсь, что это значения d.x и d.y, которые кажутся координатами относительно вашего SVG.

При этом вы можете использовать clientX и clientY.Если вы хотите использовать события D3, это d3.event.clientX и d3.event.clientY:

.on( 'contextmenu', function ( d ) {
    d3.event.preventDefault();
    $( '#dialog' ).dialog( 'option', 'title', d.name );
    $( '#dialog' ).dialog( 'open' );
    $( "#dialog" ).dialog('option', 'position', [d3.event.clientX,d3.event.clientY])
 });

Редактировать: в соответствии с документацией jQuery , вы не должны передавать массив координат, новместо этого объект, например:

{my: "left top", at: "left top", of: event }

Вот ваш раздвоенный JSFiddle: https://jsfiddle.net/589w62L3/