CODEWITHSUNDEEP
javascripthtmld3.jssvgmouseevent
Gracie williams
Gracie williams

Reputation: 1145

Mouse up event not working properly in SVG

I am using d3js to draw simple line , here I capture mouseup and mousedown , mouseup is not working as expected .Please check below code.Here is the fiddle - http://jsfiddle.net/Ltrpbsh1/ , you can drag the mouse to draw , but when i release the mouse , its not releasing.

d3.select("#xabcd")
    .append('rect')
    .attr('width', 1000)
    .attr('height', 1000)
    .on("mousedown", mousedown)
    .on("mouseup", mouseup);


var what = d3.select("#xabcd");

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

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

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

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

Upvotes: 1

Views: 1217

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102174

When the mouseup happens the blue line you're drawing is right under the mouse, and that prevents the rectangle capturing the event.

The solution is quite simple, just set pointer-events: none to that line:

line.attr("pointer-events", "none");

Here is your code with that change only:

var line;

var vis = d3.select("#chart").append("svg")
  .attr('id', 'xabcd')
  .attr('width', 1000)
  .attr('height', 1000)



d3.select("#xabcd")
  .append('rect')
  .attr('width', 1000)
  .attr('height', 1000)
  .on("mousedown", mousedown)
  .on("mouseup", mouseup);

d3.select('#xabcd')
  .style('fill', 'none')
  .style('pointer-events', 'all');


var what = d3.select("#xabcd");

function mousedown() {
  console.log("down");
  var m = d3.mouse(this);
  line = vis.append("line")
    .attr("x1", m[0])
    .attr("y1", m[1])
    .attr("x2", m[0])
    .attr("y2", m[1])
    .attr("pointer-events", "none");

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

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

function mouseup() {
  console.log("up");
  what.on("mousemove", null);
}
.as-console-wrapper {
  height: 20%;
}

svg {
  border: 1px solid grey;
}

line {
  stroke: steelblue;
  stroke-width: 2px;
  stroke-linecap: round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<div id="chart"></div>

Upvotes: 2

brubs
brubs

Reputation: 1357

The problem is that the event listener is on the rect that you are transforming and the pointer probably is never right above it. Put your mouseup event listener on the svg canvas so any point you release the mouse will listen for the change. Updated demo: http://jsfiddle.net/y6hx81j4/

var vis = d3.select("#chart").append("svg")
    .attr('id', 'xabcd')
    .attr('width', 1000)
    .attr('height', 1000)
    .on("mouseup", mouseup);

Hope it helps!

Upvotes: 0

Related Questions