What’s happening:
I’ve completed this challenge. However, the text that goes along with each <rect> is not ideal. I wrote a function to split each word to a new line by using tspan and assigning ‘x, y’ attributes but it’s not a good solution. Does anyone have any idea how make this svg text to auto align and wrap itself like <div> or <p> elements do?
Also, the css for <foreignObject> doesn’t work in Firefox and Edge. It works fine with chrome and opera. Anyone has a fix for this problem?
My codepen link:
https://codepen.io/teez-zeet/full/ZEbJmPM
*Challenge: * Visualize Data with a Treemap Diagram
*Browser information:
User Agent is: Mozilla/5.0 (Linux; Android 10; SAMSUNG SM-T865) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/11.1 Chrome/75.0.3770.143 Safari/537.36.*