D3jS显示将鼠标悬停在圆圈上的信息

Question

I have a line graph that adds circles on the line for each data point. On hover, I would like to display the "Date" and "Close" of the data point.

Here is the jsfiddle

Here is what I've tried:

.on("mouseover", function(d) {      
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);       
        svg .html(d.date + "<br/>"  + d.close)  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");    
        })                  
    .on("mouseout", function(d) {       
        svg.transition()        
            .duration(100)      
            .style("opacity", 1);   
    })

Something is happening with the code but it is very slow and doesnt show the "Date" and "Close" on mouseover.

How can I make the "Date" and "Close" show/hide for each data point circle when hovered over?

Answer 1

I think the best way to do it will be to include d3.tip for your solution. I use d3.tip.v0.6.3.js.

what you'll have to do first is to create the tool tip view in a var:

 var toolTip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "<div style='margin-bottom: -12px; color:"+d.data.color+"'>"+d.name+"</div></br><div style='margin-bottom: -5px'>"+ d.data.label+"</div></br>"; }); 

The 'function(d)' after the '.html' returns html piece for the tooltip, just don't forget the inverted commas.

right after that function you should add:

 svg.call(toolTip); 

that way your svg will know this tooltip var you created, you can create this var right after you svg.

last part will be to connect this tooltip to 2 events on the d3 elements: mouseover&mouseout:

 .on("mouseover", toolTip.show ) .on("mouseout", toolTip.hide); 

Hope it will help