D3.js：折れ線グラフ - ツールチップと垂直線のホバー

Question

D3.jsを使用して作成されたインタラクティブな折れ線グラフで作業しています。 1つのホバリングツールチップを縦線で表示したい。縦線は上手く出てきますが、ツールチップに関する問題があります。ツールチップの位置はグラフ上にはなく、最初のデータ要素のみを取得しています。

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 

私は問題が何であるかを把握することはできませんよ

は、ここに私のコードです。

どうすればこの問題を解決できますか？

ありがとうございます。

編集：ここでは作業コードです：あなたhoverMouseOn方法でhttps://jsfiddle.net/kan83q0m/1/

Answer 1

は、変数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' 上のMouseMoveリスナーを置く：

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

y値にd.classの代わりにd.numberを使用しました。ツールチップを常にgets a bit more complicatedの行に表示したい場合は、 Here's a working fiddle.

はちょうどあなたのマウスでツールチップを配置する方が簡単な場合があります。このコードは（NaNでのフル）何も行いませんlike in this fiddle.