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>

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

1 个答案: