Question

我正在尝试获取一个简单的鼠标事件以与D3.js（v5.7.0）一起使用但是由于某种原因，它不会将EVT对象传递给该函数。

这是我当前的代码：

const svg = d3.select("svg");

const width = +$('#d3canvas #d3container').width();
const height = +$('#d3canvas #d3container').height();

console.log([width, height]);

svg.append("rect")
  .attr("fill", "none")
  .attr("pointer-events", "all")
  .attr("width", width)
  .attr("height", height)
  .call(d3.zoom().on("zoom", zoom));

function zoom() {
  g.attr("transform", d3.event.transform);
}

const g = svg.append("g")
  .attr("width", width)
  .attr("height", height);

g.append("circle")
  .style("fill", "black")
  .attr("r", 40)
  .attr("cx", 50)
  .attr("cy", 20)
  .on("mousedown", test);

function test(evt) {
  console.log(evt);
}

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
}

#d3canvas {
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

  <div id="d3canvas">
    <svg width="100%" height="800px" id="d3container"></svg>
  </div>

  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
</body>

</html>

现在，如果我单击圆圈，控制台将显示“未定义”。我发现了类似的问题here（错误是css中的z-index，对我而言不是这种情况）

我确实看到该问题使用d3.selectAll，如果我将代码更改为如下所示，它将仍然无法正常工作：

g.append("circle")
.style("fill", "black")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 20);

d3.selectAll("circle").on("mousedown", test);

我可以通过将事件监听器以编程方式添加到圈子中来使其工作：

let circle = g.append("circle")
.style("fill", "black")
.attr("r", 40)
.attr("cx", 50)
.attr("cy", 20);

circle._groups[0][0].addEventListener("mousedown", test);

但是我不确定这是否是正确的方法。

问题：为什么鼠标事件对象没有传递给测试函数？什么是做这样的正确/更好的方法？

鼠标事件不会将evt对象传递给功能

0 个答案: