TidyTree - Display icon alongside text based upon text content

Community Help
1

I have my customized version of TidyTree converted to straight Javascript + d3, with some custom features, such as object type names for each object in the hierarchy, and these are clickable - once clicked, an HTTP POST operation is performed, sending the clicked object ID to a remote server, which in turn prompts the original Graphics Editor application (which was used to create the object hierarchy itself) to find the clicked object within its own Navigator. So the remote application (Graphics Editor) steps right along with the user-clicks on the TidyTree web page. This is working perfectly.

But I want to ‘pretty-up’ the viz by displaying some custom icons right next to, and ahead of, the text (the text that displays each object type). And I want the icon that is to be displayed at each object node to be selected based upon the contents of the text. For example, if an object type is “IMAGEOBJECT”, then I want a particular icon that looks like an image to be selected for display on that node, and so on, so on. I will have a complete set of icons to represent each kind of object.

If you download the assets here
you can run the TidyTree3 and see the beautiful hierarchy visualization that the Observable folks created, and that I merely leveraged and customized a bit.

Of course, you won’t be able to see the click-to-remote feature working since I have not included the remote server, Editor application, etc.

I’ve tried several things to get icons to appear ahead of the object type, but to no avail. I’ve also tried to find another viz that appears to do what I want, but couldn’t find an example to follow. I have been able to create a span element ahead of each text element, with a style that references an icon, but I could not get icons to display in the viz.

Can anyone help get me on the right track?

2

I finally found the ‘secret sauce’ to display an icon next to text, after searching and searching and searching on StackOverflow and other places. It seems that I needed to append “svg:image” instead of “image” as an element to contain the icon. It’s working now.

Lots of other people posted similar questions and the answers were all over the place - none of them worked until I found this one solution - use “svg:image” for the type of element.

Now I need to work on the code for selecting the desired icon based on the text content…that should be easy - I’ll use a function to return the “xlink:href” value, and in the function I’ll set up a 1:1 correspondence between object type and icon.