d3.js - 从 d3.js 中的鼠标位置获取 X 和 Y 轴值

Question

我需要从鼠标在 SVG 中的位置获取 X 和 Y 坐标值。我创建了一个示例 here .对于 mousemove 函数，我想要打印 x 和 y 坐标位置(根据鼠标位置的数据值缩放)。我尝试使用反转功能 - 但它也不起作用。有人可以帮我弄清楚如何从鼠标位置获取 x 和 y 坐标值吗？我正在使用 d3 版本 3。

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

Answer 1

你有几个问题。首先，使用 d3.mouse 而不是 d3.event.pageX 或 pageY。

但最大的问题是您将监听器设置为整个 SVG 并期望根据坐标区中的域查看值。那不是适当的方法。但是，如果您想坚持这样做，则必须为这些轴添加平移值。在这种情况下，50 和 10:

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 width = 400,
  height = 500;

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


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)

.as-console-wrapper { max-height: 20% !important;}

path {
  fill: none;
  stroke: black;
  shape-rendering: crispEdges;
}

line {
shape-rendering: crispEdges;
  stroke: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>