J查询上下文菜单为d3 rect

Question

谁知道如何连接矩形。on("contextmenu"， ??)与jquery代码来激活弹出式菜单?

   $(function() {
     $.contextMenu({
         selector: '.rect',
         callback: function(key, options) {
             var m = "clicked: " + key;
             window.console && console.log(m) || alert(m);
         },
         items: {
             "edit": { name: "Edit", icon: "edit" },
             "cut": { name: "Cut", icon: "cut" },
             "copy": { name: "Copy", icon: "copy" },
             "paste": { name: "Paste", icon: "paste" },
             "delete": { name: "Delete", icon: "delete" },
             "sep1": "---------",
             "quit": { name: "Quit", icon: "quit" }
         }
     });
 });

Answer 1

如果您使用'.rect'作为选择器，请确保在d3中创建rect时为rect元素添加类。如果你只想选择rect元素，而不管它们的类名，那么从选择器中省略句点。

您可以使用selection.attr('class', 'rect')将一类'rect'添加到d3元素，如下所示:

var theRect = svg.append('rect')
  .attr('class','rect')
  .attr('x', 60)
  .attr('y', 40)
  .attr('width', 100)
  .attr('height', 60)
  .attr('fill', '#555');

现在您的contextMenu应该按预期显示。

这里有一个JSBin显示了一个工作示例。