在鼠标垂直轴或水平轴上画线时如何找到距离？

Question

我想在垂直轴或水平轴上画线时计算距离。它可以显示从 mousedraw 或任何其他方式绘制的距离的旁边。有人可以帮我吗？

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);
  }

请检查我现在的实时输出：https://jsfiddle.net/anojansith/m38b5fnp/1/

Image expected output

Answer 1

您可能已经知道用于确定直线距离的勾股定理；你可以这样实现它：

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

我将您的全局变量line 和局部变量m 引用为鼠标位置。要在鼠标光标旁边显示这个？好吧，在mousedown 中，您可以在该行之外添加一个文本变量：

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

然后更新mousemove 中的文本，将其稍微移到光标的右侧。同样在这种情况下，距离表示为与数据相同的单位，通过反转比例函数，从而从像素转换回数据单位。

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])

并在mouseup中删除它

text.remove()