How do you find the distance while drawing line on mouse vertical axis or horizontal?

user_14508128 0
Viewed 48

I want to calculate the distance while drawing the line on the vertical axis or horizontal axis. It could show next to the line of how much distance drawn from mousedraw or any other ways. Can someone help me?

var width = 400,
          height = 500;

  var data = [10, 15, 20, 25, 30];
  var svg = d3.select("body")
          .append("svg")
          .attr("width", width)
          .attr("height", height)
          .on("mousedown", mousedown)
          .on("mouseup", mouseup);


  var xscale = d3.scale.linear()
          .domain([0, d3.max(data)])
          .range([0, width - 100]);

  var yscale = d3.scale.linear()
          .domain([0, d3.max(data)])
          .range([height / 2, 0]);

  svg.on("mousemove", function() {
     console.log("x - using invert", xscale.invert(d3.mouse(this)[0] - 50));
     console.log("y- using invert", yscale.invert(d3.mouse(this)[1] - 10));
  });

  var x_axis = d3.svg.axis()
          .scale(xscale).orient("bottom");

  var y_axis = d3.svg.axis()
          .scale(yscale).orient("left");;

  svg.append("g")
          .attr("transform", "translate(50, 10)")
          .call(y_axis);

  var xAxisTranslate = height / 2 + 10;

  svg.append("g")
          .attr("transform", "translate(50, " + xAxisTranslate + ")")
          .call(x_axis)


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

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

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

  function mouseup() {
     svg.on("mousemove", null);
  }

Please check the live output I have now: https://jsfiddle.net/anojansith/m38b5fnp/1/

Image expected output

d3.js web html jquery javascript
1 Answers

You might already know the Pythagorean theorem for determining the distance of a straight line; you could implement it like this:

Math.sqrt((m[0] - line.attr("x1")) ** 2 + (m[1] - line.attr("y1")) ** 2)

I'm referencing your global variable line and the local variable m for the mouse position. To display this next to the mouse cursor? Well, in mousedown you can add a text variable in addition to the line:

text = svg.append("text")
        .attr("x", m[0])
        .attr("y", m[1])
        .style("user-select", "none")

Then you update the text in mousemove, shoving it over to the right of the cursor a little. Also in this case the distance is expressed in the same units as the data, by inverting the scale functions and thereby converted from pixels back into the data units.

var dist = Math.sqrt(
        (xscale.invert(m[0]) - xscale.invert(line.attr("x1"))) ** 2 + 
        (yscale.invert(m[1]) - yscale.invert(line.attr("y1"))) ** 2)
text
  .text(dist.toFixed(2))
  .attr("x", m[0] + 10)
  .attr("y", m[1])

and remove it in mouseup

text.remove()
user_53550830
Related