5

我正在尝试为我创建的区域路径设置工具提示。我检查了所有传递给 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));        
            });
4

2 回答 2

6

@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));
}
于 2013-10-15T14:03:54.477 回答
2

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

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

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

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

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

selection.on(type[, listener[, capture]])

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

编辑

我知道意识到我误解了你的问题。您有一条路径，并希望获取有关鼠标位置的路径坐标的信息。

没有直截了当的。您可以在以下示例中看到 Mike 是如何做到的：http: //bl.ocks.org/3902569

于 2012-11-02T17:28:29.717 回答