Блог

Я пытаюсь создать 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 /

Поскольку вы выводите 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);
  }
  

Обновлена скрипка.