时间戳

首页 > 解决方案 > 如何通过右键单击打开 D3.js 上下文菜单

javascript - 如何通过右键单击打开 D3.js 上下文菜单

问题描述

我用 d3.js 在屏幕上画线。我想要做的是在过程完成后右键单击打开上下文菜单。此菜单必须是“完成”和“撤消”。我该怎么做？

let line;

let vis = d3.select("body").append("svg")
  .attr("width", 1280)
  .attr("height", 610)
  .on("click", mousedown)
  .on("contextmenu", mouseup);

function mousedown() {
  let m = d3.mouse(this);
  line = vis.append("line")
    .attr("x1", m[0])
    .attr("y1", m[1])
    .attr("x2", m[0])
    .attr("y2", m[1]);

  vis.on("mousemove", mousemove);
}

function mousemove() {
  let m = d3.mouse(this);
  line.attr("x2", m[0])
    .attr("y2", m[1]);
}

function mouseup() {
  vis.on("mousemove", null);
}
<!DOCTYPE HTML>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="assets/style.css">

<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</body>

标签： javascriptd3.jscontextmenu

解决方案

这篇文章可能会对你有所帮助。

使用 javascript 和 css 构建上下文菜单的完整详细分步指南。

您只需要将上下文项与 d3.js 操作链接即可执行操作

推荐阅读