鼠標移動效果D3.js

Question

我一直在嘗試修改D3.js提供的示例以創建一個步驟圖，在該步驟中可以將鼠標懸停在每一步上以獲取值的詳細信息。

目前我正在看：

http://bl.ocks.org/mbostock/3902569

和我的情節是這樣的：

http://jsfiddle.net/q47r3pyk/

小時後的使用JavaScript玩。它接近我的最終結果，但如果您嘗試將鼠標懸停在點上，則只會在屏幕的左手柄側獲得一個值。

如何讓懸停效果出現在放置鼠標的位置？

任何意見將不勝感激我做錯了。

我的鼠標部分看起來像：

var focus = svg.append("g") 
    .attr("class", "focus") 
    .style("display", "none"); 

focus.append("circle") 
    .attr("r", 4.5); 

focus.append("text") 
    .attr("x", 9) 
    .attr("dy", ".35em"); 

svg.append("rect") 
    .attr("class", "overlay") 
    .attr("width", width) 
    .attr("height", height) 
    .on("mouseover", function() { focus.style("display", null); }) 
    .on("mouseout", function() { focus.style("display", "none"); }) 
    .on("mousemove", mousemove); 

function mousemove() { 
    var x0 = x.invert(d3.mouse(this)[0]), 
     i = bisectDate(formatted_data, x0, 1), 
     d0 = formatted_data[i - 1], 
     d1 = formatted_data[i], 
     d = x0 - d0.x > d1.x - x0 ? d1 : d0; 
    focus.attr("transform", "translate(" + x(d.x) + "," + y(d.y) + ")"); 
    focus.select("text").text(d.y); 

Answer 1

我想你要調整你bisectDate功能（如可在你鏈接的的jsfiddle可以看出）。

如果你使用：

bisectDate = d3.bisector(function(d) { return d.x; }).left; 

（使用d.x而不是d.date），它爲我工作。

這是因爲，你是存儲x COORDS在x（在）的事實，而邁克·博斯托克的示例使用.date。因此，d3.bisect找不到合適的值。