CODEWITHSUNDEEP
javascriptd3.js
indusBull
indusBull

Reputation: 1854

d3js step-after line graph - highlight line between two points on mouseover

I am new to D3JS and created step-after line graph as shown below. Now I want to add mouseover effect to the graph. When the user mouseovers horizontal step-line, it should highlight in different color (as shown in green color in image) and also show tool tip.

I have been doing some research on this and so far I have found the examples where it changes dot (at line intersection) color on mouseover. But I have not found any example to highlight step line itself.

I would appreciate if someone can point me in right direction or provide examples. Thank you.

  var line = d3.svg.line()
                .interpolate("step-after")
                .x(function(d) { return x(d.timestamp); })              
                .y(function(d) { return y(d.score); });

  svg.append("path")
          .datum(data)
          .attr("class", "lineblue")
          .attr("d", line);

enter image description here

Upvotes: 1

Views: 1172

Answers (1)

indusBull
indusBull

Reputation: 1854

Based on @JSBob's comment, I added another line to overlay on top of original step-line on mouseover. Below is final outcome.

enter image description here

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

   var highlightLine = d3.svg.line()                            
                        .x(function(d) { return x(d.start); })              
                        .y(function(d) { return y(d.score); });

   var highlight = focus.append("g")                         
                      .style("display", "none");

   var highlightPath = highlight.append("path")                         
                         .attr("class", "highlightgreen");

   focus.on("mouseover", mouseover)
         .on("mouseout", function() { 
                   highlight.style("display", "none"); 
                    tooltip.style("display", "none"); 
         });

   var tooltip = d3.select("body").append("div")
                  .attr("class","tooltip")
                   .style("display", "none");
    function mouseover() {
          var highlightData = [];
          var x0 = x.invert(d3.mouse(this)[0]);
          var i = bisectDate(appData, x0, 1);
          var d0 = appData[i - 1];      
          highlightData.push({ start: d0.start, score: d0.score});
          highlightData.push({ start: d0.end, score: d0.score});
          highlight.style("display", "block")
                       .select("path")                                                                                  
                           .attr("class", "highlightgreen")
                            .attr("d",highlightLine(highlightData));

         var tooltipX =  (x(d0.end) - x(d0.start))/2 + x(d0.start) + 26;
         var tooltipY = y(d0.score) - 12;
         tooltip.html('Test')    
                   .style("left", tooltipX + "px")           
                   .style("top", tooltipY + "px")
                   .style("display","block");

      }

Upvotes: 1

Related Questions