d3js SVG：title工具提示未显示

Question

d3js SVG:title tooltip doesn't show up

I have a graph which contains a lot of circles, now I would like to insert to each circle a tooltip but it doesn't work neither as title in circle nor as tooltip box. I cannot find my mistake:

var circleSmall = canvas.append("circle")
             .attr("cx", 869)
             .attr("cy", 693)
             .attr("r", 10)
             .attr("fill", "green") 
.append("svg:title").text("Your tooltip info")
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})  

http://jsfiddle.net/WLYUY/57/

Answer 1

The most important obstacle here was your rects. They were appended AFTER the circles and were preventing mouse events from reaching the circles. So, first thing to do is:

/* do this or append circles AFTER appending recs */
rect {
    pointer-events: none;
}

I have added the mouseover and mouseout events necessary to show/hide the tooltip.

Complete FIDDLE here.

NOTE: For demonstration, I have painted the one circle receiving the events in large orange with an orange-red border (you can't miss it). This is just an example...normally you would apply the event listeners to all circles. And this brings me to a sanity check: you are currently appending shapes "manually" but I assume you will eventually do it based on data binding, one of the main points of D3.