我有一个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');
});
其他部分可以工作,但不是位置。有什么想法吗?我想让对话框显示在右击节点的左边。
发布于 2019-06-14 05:20:07
传递给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/
https://stackoverflow.com/questions/56591689
复制相似问题