带有节点的D3树和定位JQuery UI对话框
带有节点的D3树和定位JQuery UI对话框
提问于 2019-06-14 05:09:03
我有一个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');
});其他部分可以工作，但不是位置。有什么想法吗？我想让对话框显示在右击节点的左边。
回答 1
Stack Overflow用户
回答已采纳
发布于 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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56591689
复制相关文章
相似问题
腾讯云开发者
