[JQUERY] 마우스 오버 툴팁과 Multiseries 라인 차트

마우스 오버 툴팁과 Multiseries 라인 차트

해결법

1. ---

   1.문제는 내가 4 월에 다시 대답 참조. 나는이 그 대답에 대한 업데이트 역할을 할 것이다, 그래서 그 이후로, 나는 좀 더 SVG와 D3에 대해 배웠다.

   문제는 내가 4 월에 다시 대답 참조. 나는이 그 대답에 대한 업데이트 역할을 할 것이다, 그래서 그 이후로, 나는 좀 더 SVG와 D3에 대해 배웠다.

   참고 여기 Duopixel의 우수한 코드 샘플 @에서 코드의 비트를 빌려.

   여기에 주석 내역입니다 :

   // append a g for all the mouse over nonsense
   var mouseG = svg.append("g")
     .attr("class", "mouse-over-effects");
   
   // this is the vertical line
   mouseG.append("path")
     .attr("class", "mouse-line")
     .style("stroke", "black")
     .style("stroke-width", "1px")
     .style("opacity", "0");
   
   // keep a reference to all our lines
   var lines = document.getElementsByClassName('line');
   
   // here's a g for each circle and text on the line
   var mousePerLine = mouseG.selectAll('.mouse-per-line')
     .data(cities)
     .enter()
     .append("g")
     .attr("class", "mouse-per-line");
   
   // the circle
   mousePerLine.append("circle")
     .attr("r", 7)
     .style("stroke", function(d) {
       return color(d.name);
     })
     .style("fill", "none")
     .style("stroke-width", "1px")
     .style("opacity", "0");
   
   // the text
   mousePerLine.append("text")
     .attr("transform", "translate(10,3)");
   
   // rect to capture mouse movements
   mouseG.append('svg:rect')
     .attr('width', width)
     .attr('height', height)
     .attr('fill', 'none')
     .attr('pointer-events', 'all')
     .on('mouseout', function() { // on mouse out hide line, circles and text
       d3.select(".mouse-line")
         .style("opacity", "0");
       d3.selectAll(".mouse-per-line circle")
         .style("opacity", "0");
       d3.selectAll(".mouse-per-line text")
         .style("opacity", "0");
     })
     .on('mouseover', function() { // on mouse in show line, circles and text
       d3.select(".mouse-line")
         .style("opacity", "1");
       d3.selectAll(".mouse-per-line circle")
         .style("opacity", "1");
       d3.selectAll(".mouse-per-line text")
         .style("opacity", "1");
     })
     .on('mousemove', function() { // mouse moving over canvas
       var mouse = d3.mouse(this);
   
       // move the vertical line
       d3.select(".mouse-line")
         .attr("d", function() {
           var d = "M" + mouse[0] + "," + height;
           d += " " + mouse[0] + "," + 0;
           return d;
         });
   
       // position the circle and text
       d3.selectAll(".mouse-per-line")
         .attr("transform", function(d, i) {
           console.log(width/mouse[0])
           var xDate = x.invert(mouse[0]),
               bisect = d3.bisector(function(d) { return d.date; }).right;
               idx = bisect(d.values, xDate);
   
           // since we are use curve fitting we can't relay on finding the points like I had done in my last answer
           // this conducts a search using some SVG path functions
           // to find the correct position on the line
           // from http://bl.ocks.org/duopixel/3824661
           var beginning = 0,
               end = lines[i].getTotalLength(),
               target = null;
   
           while (true){
             target = Math.floor((beginning + end) / 2);
             pos = lines[i].getPointAtLength(target);
             if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                 break;
             }
             if (pos.x > mouse[0])      end = target;
             else if (pos.x < mouse[0]) beginning = target;
             else break; //position found
           }
   
           // update the text with y value
           d3.select(this).select('text')
             .text(y.invert(pos.y).toFixed(2));
   
           // return position
           return "translate(" + mouse[0] + "," + pos.y +")";
         });
     });
   

   전체 작업 코드 :

   <스크립트 // cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"> <스타일> 몸 { 폰트 : 10px 세리프체; } .axis 경로, .axis 라인 { 입력 : 없음; 스트로크 : # 000; 모양 렌더링 : crispEdges 단계; } .x.axis 경로 { 표시 : 없음; } .선 { 입력 : 없음; 스트로크 : steelblue; 스트로크 폭 : 1.5px; }