因为业务需要折腾起了图表,该系列用于记录使用该库制作 Tree 图表的一些笔记。上节讲了个很简单的添加浮层,这节我们来讲个更简单的,添加右键菜单。

添加右键菜单

smartMenu

smartMenu 是网上一个可以右键自定义上下文菜单的 jQuery 插件,具体 api 请查看SmartMenus for jQuery,这里不进行详细的说明。

添加资源

首先我们需要添加对应的资源,由于 smartMenu 是基于 jQuery 的,故我们还需要引入 jQuery:

<link href="./smartMenu/smartMenu.css" rel="stylesheet" />
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<script src="./smartMenu/smartMenu.js"></script>

当然,如果你是需要在模块化中使用,也可以通过npm install smartmenus来安装依赖。

添加菜单

代码很简单,我们只需要全局进行 smartMenu 初始化,并绑定到响应节点,这里是类名为 node 的 g 元素:

// 定义菜单选项
var userMenuData = [
  [
    {
      text: "菜单1",
      func: function() {
        // id为节点id
        var id = Number($(this).attr("id"));
        alert("菜单1", id);
      }
    },
    {
      text: "菜单2",
      func: function() {
        var id = Number($(this).attr("id"));
        alert("菜单1", id);
      }
    }
  ]
];
// 事件监听方式添加事件绑定
$("body").smartMenu(userMenuData, {
  name: "chatRightControl",
  container: "g.node"
});

这里我们需要确认选中的是哪个节点,故我们用 id 的方式标志。前面我们 id 是通过从 1 开始的整数:

// 给节点添加id,用于选择集索引
var node = view.selectAll("g.node").data(nodes, function(d) {
  return d.id || (d.id = ++i);
});

故我们可以通过添加属性的方式,来把节点的 id 添加到元素上,因为在 smartMenu 中,func属性的function中,this 是指向被右键选中的 dom 元素(故这里不能使用箭头函数)。

var nodeEnter = node
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("id", d => d.id);
// ...其他操作

最终效果如图: image

结束语

本节简单介绍了给节点添加右键菜单的过程,当然,大多数都是 smartMenu 的工作。这里只介绍了最简单的配置方式,还有分块配置、多层子菜单配置,甚至看文档说明似乎支持移动端,这个插件挺好用的,小伙伴们可以研究下。

此处查看项目代码
此处查看页面效果

部分文章中使用了一些网站的截图,如果涉及侵权,请告诉我删一下谢谢~
温馨提示喵