CODEWITHSUNDEEP
javascriptd3.js
Rakesh
Rakesh

Reputation: 63

D3.js Line chart tooltip at points

I want to add tooltip to this chart. I am referring to this and this example

The issue is that their are no unique points on the line in the SVG it just has the path tag.

 svg.selectAll("dot")   
    .data(data)         
.enter().append("circle")                               
    .attr("r", 5)       
    .attr("cx", function(d) { return x(d.date); })       
    .attr("cy", function(d) { return y(d.close); })     
    .on("mouseover", function(d) {      
        div.transition()        
            .duration(200)      
            .style("opacity", .9);      
        div .html(formatTime(d.date) + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        div.transition()        
            .duration(500)      
            .style("opacity", 0);   
    });

Like the above code selects the dot on the SVG but I dont have any specific element to bind the tooltip.

Can any one help me in this as I am new to d3.js.

Upvotes: 1

Views: 2101

Answers (1)

Alexey G
Alexey G

Reputation: 1118

you should take d.value for y:

.attr("cy", function(d) { return y(d.value); })

and now append new element on mouseover:

.on("mouseover", function(d) {      
        svg.append("text")
          .text(d.value)
          .attr('class', 'tooltip').style("font-size","10px")
          .attr("x", x(d.date))
          .attr("y", y(d.value))
          .attr('fill', 'red');
        })                  
    .on("mouseout", function(d) {       
        d3.selectAll('.tooltip').remove();
    });

Upvotes: 2

Related Questions