使用Javascript D3库,如何在mousemove事件中确定区域元素数据集中的鼠标位置？

Question

我正在尝试为我创建的区域路径设置工具提示.我检查了传递给on mousemove事件处理程序的所有参数,我只是得到完整的数据集0,0.就我所见,没有任何东西可以指示数据中的索引."这个"上下文也是svg路径元素.仍然没有用.甚至看了d3.select(this),我也找不到索引.有没有办法确定我的鼠标是哪个数据点？

环顾四周,我发现了对d3.mouse(this)的引用,这给了我x/y坐标,但是如何将它映射回数据集中的数据点呢？

我的目标是使用工具提示来显示与集合中特定数据点相关的一些元数据.

以下是一些要求的代码片段:

var area=d3.svg.area()
    .interpolate("monotone")
    .x(function(d){
      return(scale.x(d.date));
    })
    .y0(height-padding.bottom)
    .y1(function(d){
      return(scale.y(d.count));
    });

var path=svg.append('path')
            .datum(data)
            .attr('d',area)
            .attr("clip-path", "url(#clip)")
            .attr('fill','url(#gradient)')
            // .attr('title','path')
            .on('mousemove',function(){
              console.log(arguments);
              console.log(d3.select(this));
              console.log(d3.mouse(this));        
            });          

Answer 1

@nautat在他的编辑中有正确的答案,但我想扩展它,因为无论出于何种原因,块示例很少有评论,可以像展开其他人的折纸.

这是来自http://bl.ocks.org/3902569的相关部分...沿途的评论是我的

// define a function for mouse move
// this function is wired up to the visualization elsewhere with .on('mousemove', fn)
function mousemove() {
  // using the x scale, in this case a d3 time scale
  // use the .invert() function to interpolate a date along the scale
  // given the x-coordinates of the mouse
  var x0 = x.invert(d3.mouse(this)[0]),

    // using the interpolated date, find an index in the sorted data
    // this would be the index suitable for insertion
    i = bisectDate(data, x0, 1),

    // now that we know where in the data the interpolated date would "fit"
    // between two values, pull them both back as temporaries
    d0 = data[i - 1],
    d1 = data[i],

    // now, examine which of the two dates we are "closer" to
    // to do this, compare the delta values
    d = x0 - d0.date > d1.date - x0 ? d1 : d0;

    // move the "focus" element into position
    // we find the X and Y values for the new position using the x and y scales
    // using the closest data point to the mouse
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.close) + ")");

    // set the text of the "focus" element to be the value of the element selected
    focus.select("text").text(formatCurrency(d.close));
}

Answer 2

您的问题与鼠标悬停事件侦听器没有太大关系，而更多地与将数据绑定到路径的方式有关；您没有进行正确的数据连接。

\n\n

了解有关数据连接的更多信息： http: //bost.ocks.org/mike/join/

\n\n

下面的例子是用div代替path，但是原理是一样的。请参阅工作示例： http: //jsfiddle.net/RghQn/

\n\n

var data = [\'a\', \'b\', \'c\'];\nd3.select("body").selectAll("div")\n    .data(data)\n  .enter().append("div")\n    .text(String)\n    .on("mouseover", function(d,i) {\n        console.log("mouseover!");\n        // d: bound datum to DOM element\n        console.log("d: ", d);\n        // i: index of the selection\n        console.log("i: ", i);\n        // this context: the current DOM element\n        console.log(d3.select(this).text());\n    });\n\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\xe2\x80\x8b\n

\n\n

另请参阅有关事件侦听器的 API 文档部分：https://github.com/mbostock/d3/wiki/Selections#wiki-on

\n\n

\n

Selection.on(类型[, 侦听器[, 捕获]])

\n\n

为指定类型的当前选择中的每个元素添加或删除事件侦听器。\n 该类型是字符串事件类型名称，例如“click”、“mouseover”或“submit”。指定的侦听器以与其他运算符函数相同的方式调用，传递当前数据 d 和索引 i，并将 this 上下文作为当前 DOM 元素。要访问当前事件，请使用全局\n d3.event。

\n

\n\n\n\n

编辑

\n\n

我知道我误解了你的问题。您有一条路径，并且想要获取有关鼠标所在位置的路径坐标的信息。

\n\n

这并不简单。您可以在以下示例中看到 Mike 是如何做到的：http://bl.ocks.org/3902569

\n