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

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 and 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 带节点的对话框

D3 tree and positioning JQuery UI Dialog with nodes

jquery

jquery-ui

d3.js