时间戳

首页 > 解决方案 > D3树和定位带有节点的JQuery UI Dialog

jquery - D3树和定位带有节点的JQuery UI Dialog

问题描述

我有一个 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');
    });

其他位有效，只是位置无效。有任何想法吗？我想让对话框显示在右击节点的左侧。

小提琴

标签： jqueryjquery-uid3.js

解决方案

传递给 jQuery 的位置dialog是从当前视图的左上角开始测量的（不管滚动量）。我非常怀疑这些是d.xandd.y值，它们似乎是相对于您的 SVG 的坐标。

话虽如此，您可以使用clientXand clientY。如果你想使用 D3 的事件，它们是d3.event.clientXand 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/

推荐阅读