D3.js: Multi-select tooltip with g element.

Hey guys. Today, I’d been attempting figure out what is the best to make multiple selected tooltip.
There are some kinds of nominee here, div, text, title attribute, or using jQuery plugin like tooltipsy.
But at least from today’s testing, these were not so good.
Instead, I like to use nested g element contain target element and tooltips, like below image and link to the blo.cks.org page.

A pitfall of multiple selection was identity of a target and it’s tooltip. It seems to be common to set the same id or data attribute each other to connect tooltip and selected element. Div and text are apparently used to do so. These types of tooltip can communicate with selected elements remotely.
But problem is that some identifier can be duplicate. When you are unlucky, you have doubling id, and you could be confronted with a wrong tooltip popping up.

And in some cases, sufficient identifiers are lack. You can manage to craft it by putting index or hashtag or something. But I don’t want to do such a trick. So I think remote binding of a target element and tooltips is not good.

Rather, maintaining identity is tedious specifically when you want to show many different type of tooltips at a time.

There are other downsides of the nominees.
When you want to show div tooltips, you should append them outside of svg, then set style —z-index and absolute position. It’s the conjunction of utterly different element. After that, you may faced with problem because of these have incompatible behaviors.
Title attribute is nice to show text, but it is only for that.
I think text element is the best among them. In fact, I used it. But for good use, it need to be wrapped with g like the the example above.

G element is nice, because g can wrap almost any svg element. It’s like a folder.
How g can be used for? A g can bring a circle and a smaller g. And the small g contains tooltip like text and image. Finally, the inner elements can be access each other not by class name, id name, or data property, but the relative path of DOM.

G packages tooltips , turn on and off these elements at the same time.
The implementation is in the link above.

But the nicer harvest for me is the image that g is like a folder. If so, what if bunch of different data are holed and selected? Multiple selector could do multiple calculation and multiple fetching.

code:

Leave a Reply