使用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

您的問題與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，並將此上下文作為當前DOM元素。 要訪問當前事件，請使用全局d3.event。

---

編輯

我知道我誤解了你的問題。 您有一條路徑，想要獲取有關鼠標位置的路徑坐標的信息。

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