imranghory / treemap-squared Goto Github PK

What do need to have a responsive version?

"You can nest data to an arbitary number of levels of depth."
I think I have created an example of the library failing when going to 3 levels of depth (works fine for two levels, I haven't yet seen 3 levels working).
http://www.jemimaforkbeard.thelogicalhairs.com/Treemap/ThreeLevelNotWorking/TreemapFromText.html
Do you have an example of Treemap Squared working with three or more levels?

ThreeLevelProblemDemo.zip

I'm pretty new to coding in general. Love this simple way to create a tree map. I'm getting the following error:
Uncaught ReferenceError: Raphael is not defined
at Object.draw (treemap-squared-0.5.min.js:175)
at HTMLDocument. (Test.html:18)
at o (jquery.min.js:2)
at Object.fireWith (jquery.min.js:2)
at Function.ready (jquery.min.js:2)
at HTMLDocument.B (jquery.min.js:2)

My example of

data = [1,[2,3]];
labels = ["1", ["2", "3"]];
Treemap.draw("TreeMap", 1800, 600, data, labels);

Hands back

<svg height="600" version="1.1" width="1800" xmlns="http://www.w3.org/2000/svg" style="overflow: 
hidden; position: relative;">
<desc>Created with Raphaël 2.1.0</desc>
<defs>
<rect x="0" y="0" width="1800" height="600" r="0" rx="0" ry="0" fill="none" stroke="#000" style="">
<rect x="0" y="0" width="0" height="0" r="0" rx="0" ry="0" fill="#006628" stroke="#000000" style="">
<text style="text-anchor: middle; font: 10px "Arial";" x="0" y="0" text-anchor="middle" font="10px     "Arial""     stroke="none" fill="#fcfcfc" font-size="NaNpx">
<tspan dy="3.5">1</tspan>
</text>
<rect x="0" y="0" width="0" height="0" r="0" rx="0" ry="0" fill="#006628" stroke="#000000" style="">
<text style="text-anchor: middle; font: 10px "Arial";" x="0" y="0" text-anchor="middle" font="10px "Arial""    stroke="none" fill="#fcfcfc" font-size="NaNpx">
<tspan dy="3.5">2,3</tspan>
</text>
</svg>

The cords and sizes all seem to become zeroed.

I was trying to style nodes based on CSS, and it is proving difficult as the nodes generated are look appropriate when stacked on top of one another because of their x and y offset, however their size is much larger than it needs to be. This causes problems with adding other elements to the DOM. Suggestions?

If I don't use the minified version I obtain:

TypeError: Treemap.draw is not a function

If the matrix i send to generate is not squared on any depth level it generates NaNs or has reference errors.
Checking the source code i saw that the array dimensions are looked only on the first array, i think that fixing this is not so easy as it is a hipothesis spread over the code.
Is there another tree generator library around ?
If i dont find another lib to do this, on any languaje (through wasm at least) i will fix it but i know it probably wont get to be accepted as the mantainer is apparently gone, so i will document what happens here for the next. Cheers