javascript - 如何将鼠标单击 x 值转换为 d3 中 x 轴域中的值？

Question

我在 d3 中创建了一个 x 轴，如下所示。请注意，data.x 的最小值为 -3，最大值为 +3。

var data = [ {x:-3, y:20}, {x:3, y:10}, ... {x:-2, y:15} ];
var xmin = d3.min(data, function(d) { return d.x; });
var xmax = d3.max(data, function(d) { return d.x; });
var x = d3.scale.linear().domain([xmin, xmax]).range([0, 220]);
var xAxis = d3.svg.axis().scale(x).orient('bottom');
d3.select(this).append('g')
 .on('click', function(d) { 
  var xPos = d3.event.x; //how do i convert this value to a valid value on the x-axis?
 })
 .call(xAxis);

xAxis 或 x 对象上是否有一个 util 函数允许我将鼠标点击位置的 x 值映射到x轴？

问题在 plnkr http://plnkr.co/edit/RFOoYxtBgNPcV4cnR4F5 上有详细说明.

Answer 1

这样做:

.on('click', function(d) { 
  var xPos = x.invert(d3.event.x); 
 })

这里函数x是

var x = d3.scale.linear().domain([xmin, xmax]).range([0, 220]);