D3.js：折線圖 - 工具提示和垂直線懸停

Question

我一直在使用D3.js構建交互式折線圖。一個懸停我想要一個垂直線顯示工具提示。垂直線出來很好，但是，我有與工具提示有關的問題。工具提示位置不在圖形上，我只獲取第一個數據元素。

這裏是我的代碼：

margin = { 
        top: 20, 
        right: 20, 
        bottom: 20, 
        left: 50 
       }; 
     var width = Math.max(250, Math.min(700, d3.select("#content").width- margin.left - margin.right)), 
        height = 500; 

     var vis = d3.select("#line_chart").append("svg") 
          .attr("width", width + margin.left + margin.right) 
          .attr("height", height + margin.top + margin.bottom); 

     max_x = 0, max_y = 0, min = 100; 

     d3.csv("line.csv", function(error, data) { 


       for(i=0; i < data.length; i++){ 
        max_y = Math.max(max_y, data[i].number); 
        max_x = Math.max(max_x, data[i].class); 
        min = Math.min(min, data[i].class); 
       } 


        xScale = d3.scale.linear().range([margin.left, width - margin.right]).domain([min, max_x]), 

        yScale = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0, max_y]), 

        xAxis = d3.svg.axis() 
        .scale(xScale), 

        yAxis = d3.svg.axis() 
        .scale(yScale) 
        .orient("left"); 

       vis.append("svg:g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + (height - margin.bottom) + ")") 
        .call(xAxis); 

       vis.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(" + (margin.left) + ",0)") 
        .call(yAxis); 

       var lineGen = d3.svg.line() 
        .x(function(d) { 
         return xScale(d.class); 
        }) 
        .y(function(d) { 
         return yScale(d.number); 
        }) 
        .interpolate("basis"); 

       var pth = vis.append('svg:path') 
        .attr('d', lineGen(data)) 
        .attr('stroke', '#000') 
        .attr('stroke-width', 3.5) 
        .attr('fill', 'none'); 

       var totalLength = pth.node().getTotalLength(); 

       pth 
        .attr("stroke-dasharray", totalLength + " " + totalLength) 
        .attr("stroke-dashoffset", totalLength) 
        .transition() 
        .duration(2400) 
        .ease("linear") 
        .attr("stroke-dashoffset", 0); 

       //Line chart mouse over 
       var hoverLineGroup = vis.append("g") 
            .attr("class", "hover-line"); 

       var hoverLine = hoverLineGroup 
        .append("line") 
         .attr("stroke", "#000") 
         .attr("x1", 10).attr("x2", 10) 
         .attr("y1", 0).attr("y2", height); 

       var hoverTT = hoverLineGroup.append('text') 
        .attr("class", "hover-tex capo") 
        .attr('dy', "0.35em"); 

       var cle = hoverLineGroup.append("circle") 
        .attr("r", 4.5); 

       var hoverTT2 = hoverLineGroup.append('text') 

        .attr("class", "hover-text capo") 
        .attr('dy', "0.35em"); 

       hoverLineGroup.style("opacity", 1e-6); 

       var rectHover = vis.append("rect") 
        .data(data) 
        .attr("class", "overlay") 
        .attr("width", width) 
        .attr("height", height); 

       rectHover 
        .on("mouseout", hoverMouseOff) 
        .on("mousemove", hoverMouseOn); 

       function hoverMouseOn(d) { 

         var mouse_x = d3.mouse(this)[0]; 
         var mouse_y = d3.mouse(this)[1]; 
         var graph_y = yScale.invert(mouse_y); 
         var graph_x = xScale.invert(mouse_x); 

         hoverTT.text("Marks: " + Math.round(graph_x * 100)/100); 
         hoverTT.attr('x', mouse_x + 10); 
         hoverTT.attr('y', yScale(d.class)); 


         hoverTT2.text("Frequency: " + Math.round(d.number * 100)/100) 
         .attr('x', mouse_x + 10) 
         .attr('y', yScale(d.class) +15); 

         cle 
         .attr('x', mouse_x) 
         .attr('y', mouse_y); 


         hoverLine.attr("x1", mouse_x).attr("x2", mouse_x) 
         hoverLineGroup.style("opacity", 1); 

       } 

       function hoverMouseOff() { 
         hoverLineGroup.style("opacity", 1e-6); 
       }; 

      }); 
     } 

數據：

class,number 
25,1 
30,7 
35,11 
45,13 
50,21 
55,23 
60,30 
65,41 
75,39 
80,24 
85,14 
90,4 
95,8 
100,2 

我無法弄清楚是什麼問題。

我該如何解決這個問題？

在此先感謝。

編輯：這裏是工作代碼：https://jsfiddle.net/kan83q0m/1/

Answer 1

在你hoverMouseOn方法中，變量d是不確定的。你需要使用d3.bisector找到最接近的數據點，就像這樣：

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

var mouseDate = xScale.invert(mouse_x); 
var i = bisectDate(data, mouseDate); 

var d0 = data[i - 1] 
var d1 = data[i]; 
var d = mouseDate - d0[0] > d1[0] - mouseDate ? d1 : d0; 

而且，我把鼠標移動監聽器「可見」而不是「rectHover」：

 vis 
      .on("mouseout", hoverMouseOff) 
      .on("mousemove", hoverMouseOn); 

並使用d.number而不是d.class作爲y值。如果你想讓工具提示總是在線gets a bit more complicated。 Here's a working fiddle.

可能會更容易只是把工具提示在鼠標座標like in this fiddle.