8

I'm banging my head here. I want to display tooltips for the leaf nodes in a structure such as Zoomable Pack Layout. The leaf nodes are the brown ones. 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 d.x;
    })
    .attr("cy", function(d) {
        return d.y;
    })
    .attr("r", function(d) {
        return d.r;
    })
    .on("click", function(d) {
        zoom(node == d ? root : d);
    })
    .append("svg:title")
    .text("test");          \\ Browser uses this for tooltips

I get tooltips 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 by returning something only when a varaible contained by leaf nodes is present may prevent the parent nodes from showing a tooltip but I'm afraid all it did was allow a hidden tooltip taht silently prevents anything from displaying.

Any thoughts? I figure I either need to stack the 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 that.

Here is a fiddle of the tooltips: Fiddle

VividD
  • 10,456
  • 6
  • 64
  • 111
Curtis Kelsey
  • 716
  • 8
  • 32

1 Answers1

9

The problem is in fact not the code, but the CSS that prevents the leaf node circles from receiving pointer events. Simply remove

circle.child {
  pointer-events: none;
}

and it works fine. Complete example here.

Lars Kotthoff
  • 107,425
  • 16
  • 204
  • 204
  • I run into the same issue asked here http://stackoverflow.com/questions/42157181/add-tooltip-to-d3-js-zoomable-circle-packing , tried to add tooltips in the same fashion as described but instead I get no tooltips and the circle pack does not even display any longer. Any help on that would be highly appreciated! – JohnDoe Feb 12 '17 at 15:53