Mouseover Effect 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 не может найти правильное значение.