d3 rect的jquery上下文菜单

时间:2014-06-16 15:33:23

标签: d3.js

任何人都知道如何将矩形.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" }
         }
     });
 });

1 个答案:

答案 0 :(得分:0)

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

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

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