selection.on（type [，listener [，capture]]）

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

您的问题与鼠标悬停事件监听器的关系不大，但更多的是将数据绑定到路径的方式;你没有做正确的数据连接。

详细了解数据联接：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，使用此上下文作为   当前的DOM元素。要访问当前事件，请使用全局   d3.event。

修改

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

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

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

2 个答案:

selection.on（type [，listener [，capture]]）