Question

我有一棵D3树，需要在右键单击的节点旁边放置JQuery UI对话框。

对话框的位置不适用于$( "#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');
    });

其他位起作用，只是位置不起作用。有任何想法吗？我希望对话框显示在右键单击的节点的左侧。

fiddle

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 documentation，您不应传递坐标数组，而应传递对象，例如：

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

这是您分叉的JSFiddle：https://jsfiddle.net/589w62L3/

D3树和带有节点的定位JQuery UI对话框

1 个答案: