I essentially increased the treemap layout padding and then used the d.dy value to size the parent background to occupy the container’s full height rather than just the header height.
#ANYCHART TREEMAP HEADERS HOW TO#
I received a question about how to space out the parent/child groups so I put this demo together to show one possible avenue to implement this. I also called appendChild on the parent container to make sure the moused-over child had the highest z-index within the groups of child nodes, otherwise the filtering gets clipped by any child added after the current child. I added an SVG filter (in the section) and just modified the background border stroke of each child on mouseover. (this) // workaround for bringing elements to the front (ie z-index) I’ve modified one of the above examples to demonstrate this:īasically, I just added code to modify the child blocks on mouseover like this: var childEnterTransition = childrenCells.enter()
In the comments for this post I received a request to show how one might highlight the children on mouseover. Here is the third version which uses IDs instead of the name so duplicates titles will work (notice the two ‘display’ groups on the left side): ( link to code) …and here is the second version which uses SVG text elements: ( link to code) ( bl.) So here is the first example which uses divs for the labels: ( link to code) ( bl.) I could write checks to use svg elements instead of foreignobjects for the labels but you get what you need from the second demo if you want IE compatibility.) (NOTE: The labels do not work in IE in the first and third demos because IE is a horrible browser. I also modified the examples of others in the thread so instead of showing labels where there is enough room to see them, I instead took the approach of showing labels for given group when that group was selected. However, wrapping is much more involved and ended up creating a second version which uses embedded HTML divs to create self wrapping labels which seem to look a little better.
I created two versions: the first uses SVG labels which are nice because you can measure them to decide what room is available for displaying a label in a given cell. I came across a post that showed the attempts of others to create the same thing and I wanted to show the code of how I did it in case others are interested. I wanted to create a treemap that showed grouping headers like the JIT version that has been around for a while, but it took a little more work to get D3 to do the same thing. I absolutely love it and its treemap is especially powerful. The D3 library is really a great way to create data visualizations in HTML5.
0 kommentar(er)
