Tips for nested circles in D3 layout

Question

I am banging my head. I want to display tooltips for leaf nodes in a structure, such as a Scalable Package Layout . Leaf nodes are brown. If I used the standard code for tooltips:

vis.selectAll("circle") .data(nodes) .enter() .append("svg:circle") .attr("class", function(d) { return d.children ? "parent" : "child"; }) .attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }) .attr("r", function(d) { return dr; }) .on("click", function(d) { zoom(node == d ? root : d); }) .append("svg:title") .text("test"); \\ Browser uses this for tooltips 

I get hints on the primary circles, but not on the leaf nodes. I tried:

 .append("svg:title") .text(function(d) { if(d.size){return 'test';} }); 

... hoping that returning something only when the varaible contained in the leaf nodes is present might prevent the parent nodes from displaying a tooltip, but I'm afraid that all he did was let the hidden taht tooltip, which is silent prevents anything displayed.

Any thoughts? I suppose that I need to either collect svg: circles so that the leaf nodes are in front of the others, or attach svg: titles only to the leaf nodes, but I'm not sure how to do this.

Here is a tooltip fiddle: Fiddle

Answer 1

The problem is not really in the code, but in CSS, which prevents node leaf circles from receiving pointer events. Just uninstall

 circle.child { pointer-events: none; } 

and it works great. Full example here .