Question

我正在尝试构建一个d3.js图表，用户可以使用鼠标绘制线条。我能够在网格上添加透明矩形并在mousemove上开始绘制线条但是从未检测到鼠标向上事件。

  var rect = chartContainer.append("rect")
  rect.attr('x', 0)
  .attr('y', 0)
  .attr('width', width)
  .attr('height', height)
  .style({'fill': 'transparent'})
  .on("mouseup", mouseup)
  .on("mousedown", mousedown);

  function mouseup() {
      console.log("mouse up");
      rect.on("mousemove", null);
  }

代码在这里：https://jsfiddle.net/fLk405oc/

Answer 1

由于您要将line绘制到鼠标光标，mouseup上的rect事件不会发生line事件。最简单的修复就是缩短线条，使鼠标光标不在它上面：

  function mousemove() {
      var m = d3.mouse(this);
      //console.log(drawnline);
      drawnline
        .attr("x2", m[0] - 1) //<-- -1 to get mouse on rect
        .attr("y2", m[1] - 1);
  }

更新了fiddle。

鼠标悬停事件未使用d3.js触发

1 个答案: