2014-02-24 3 views
0

https://github.com/philogb/jit을 사용하여 top에서 오는 데이터의 트리 맵을 만들려고합니다.philogb/Treemap 만 렌더링되지 않음

"{"rsyslogd":{"children":[{"children":[],"data":{"PID":"17670","$color":"#D40106","cmdinfo":"<br><b>USER</b>:syslog<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:383m<br><b>RES</b>:5412<br><b>SHR</b>:1108<br><b>S</b>:S<br><b>CPU</b>:177%<br>%<b>MEM</b>:0.3%<br><b>TIME+</b>:32230:25<br>","$area":4},"id":"proc-1-17670","name":"rsyslogd"}],"data":{"PID":"rsyslogd","$area":50},"id":"proc-rsyslogd","name":"rsyslogd(1)"},"init":{"children":[{"children":[],"data":{"PID":"1","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:23584<br><b>RES</b>:1324<br><b>SHR</b>:1044<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.10<br>","$area":2},"id":"proc-1-1","name":"init"}],"data":{"PID":"init","$area":30},"id":"proc-init","name":"init(1)"},"dbus-daemon":{"children":[{"children":[],"data":{"PID":"88","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:messageb<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:23556<br><b>RES</b>:328<br><b>SHR</b>:324<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:00.00<br>","$area":1},"id":"proc-1-88","name":"dbus-daemon"}],"data":{"PID":"dbus-daemon","$area":20},"id":"proc-dbus-daemon","name":"dbus-daemon(1)"},"sshd":{"children":[{"children":[],"data":{"PID":"183","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:49436<br><b>RES</b>:1640<br><b>SHR</b>:1528<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.14<br>","$area":2},"id":"proc-1-183","name":"sshd"}],"data":{"PID":"sshd","$area":30},"id":"proc-sshd","name":"sshd(1)"},"cron":{"children":[{"children":[],"data":{"PID":"209","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:18900<br><b>RES</b>:704<br><b>SHR</b>:628<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:01.34<br>","$area":1},"id":"proc-1-209","name":"cron"}],"data":{"PID":"cron","$area":20},"id":"proc-cron","name":"cron(1)"},"mysqld":{"children":[{"children":[],"data":{"PID":"240","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:mysql<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:334m<br><b>RES</b>:49m<br><b>SHR</b>:3988<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:58:21.44<br>","$area":33},"id":"proc-1-240","name":"mysqld"}],"data":{"PID":"mysqld","$area":340},"id":"proc-mysqld","name":"mysqld(1)"},"sendmail-mta":{"children":[{"children":[],"data":{"PID":"317","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:68284<br><b>RES</b>:844<br><b>SHR</b>:648<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:31.61<br>","$area":2},"id":"proc-1-317","name":"sendmail-mta"}],"data":{"PID":"sendmail-mta","$area":30},"id":"proc-sendmail-mta","name":"sendmail-mta(1)"},"apache2":{"children":[{"children":[],"data":{"PID":"372","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:342m<br><b>RES</b>:8404<br><b>SHR</b>:5412<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.5%<br><b>TIME+</b>:0:50.46<br>","$area":6},"id":"proc-1-372","name":"apache2"},{"children":[],"data":{"PID":"24804","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:369m<br><b>RES</b>:81m<br><b>SHR</b>:56m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:5.3%<br><b>TIME+</b>:0:07.93<br>","$area":54},"id":"proc-1-24804","name":"apache2"},{"children":[],"data":{"PID":"24821","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:66m<br><b>SHR</b>:41m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.3%<br><b>TIME+</b>:0:06.27<br>","$area":44},"id":"proc-1-24821","name":"apache2"},{"children":[],"data":{"PID":"24828","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:71m<br><b>SHR</b>:53m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.7%<br><b>TIME+</b>:0:06.39<br>","$area":48},"id":"proc-1-24828","name":"apache2"},{"children":[],"data":{"PID":"24832","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:361m<br><b>RES</b>:70m<br><b>SHR</b>:52m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.6%<br><b>TIME+</b>:0:04.18<br>","$area":47},"id":"proc-1-24832","name":"apache2"},{"children":[],"data":{"PID":"24860","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:368m<br><b>RES</b>:77m<br><b>SHR</b>:53m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:5.1%<br><b>TIME+</b>:0:06.15<br>","$area":52},"id":"proc-1-24860","name":"apache2"},{"children":[],"data":{"PID":"24862","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:361m<br><b>RES</b>:58m<br><b>SHR</b>:41m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.8%<br><b>TIME+</b>:0:03.86<br>","$area":39},"id":"proc-1-24862","name":"apache2"},{"children":[],"data":{"PID":"24878","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:51m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.4%<br><b>TIME+</b>:0:01.54<br>","$area":35},"id":"proc-1-24878","name":"apache2"},{"children":[],"data":{"PID":"24882","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:53m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.5%<br><b>TIME+</b>:0:01.60<br>","$area":36},"id":"proc-1-24882","name":"apache2"},{"children":[],"data":{"PID":"24885","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:61m<br><b>SHR</b>:38m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.65<br>","$area":41},"id":"proc-1-24885","name":"apache2"},{"children":[],"data":{"PID":"24887","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:366m<br><b>RES</b>:73m<br><b>SHR</b>:50m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.8%<br><b>TIME+</b>:0:02.04<br>","$area":49},"id":"proc-1-24887","name":"apache2"},{"children":[],"data":{"PID":"24888","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:60m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.9%<br><b>TIME+</b>:0:02.34<br>","$area":40},"id":"proc-1-24888","name":"apache2"},{"children":[],"data":{"PID":"24889","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:61m<br><b>SHR</b>:39m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.81<br>","$area":41},"id":"proc-1-24889","name":"apache2"},{"children":[],"data":{"PID":"24892","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:356m<br><b>RES</b>:47m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.1%<br><b>TIME+</b>:0:02.60<br>","$area":32},"id":"proc-1-24892","name":"apache2"},{"children":[],"data":{"PID":"24893","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:355m<br><b>RES</b>:49m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:0:01.70<br>","$area":33},"id":"proc-1-24893","name":"apache2"},{"children":[],"data":{"PID":"24897","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:62m<br><b>SHR</b>:38m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.1%<br><b>TIME+</b>:0:02.44<br>","$area":42},"id":"proc-1-24897","name":"apache2"},{"children":[],"data":{"PID":"24900","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:365m<br><b>RES</b>:63m<br><b>SHR</b>:39m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.1%<br><b>TIME+</b>:0:01.82<br>","$area":42},"id":"proc-1-24900","name":"apache2"},{"children":[],"data":{"PID":"24903","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:364m<br><b>RES</b>:56m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.7%<br><b>TIME+</b>:0:03.43<br>","$area":38},"id":"proc-1-24903","name":"apache2"},{"children":[],"data":{"PID":"24924","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:365m<br><b>RES</b>:61m<br><b>SHR</b>:37m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:02.13<br>","$area":41},"id":"proc-1-24924","name":"apache2"},{"children":[],"data":{"PID":"24926","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:51m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.3%<br><b>TIME+</b>:0:00.81<br>","$area":34},"id":"proc-1-24926","name":"apache2"},{"children":[],"data":{"PID":"24930","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:367m<br><b>RES</b>:61m<br><b>SHR</b>:36m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.0%<br><b>TIME+</b>:0:01.32<br>","$area":41},"id":"proc-1-24930","name":"apache2"},{"children":[],"data":{"PID":"24933","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:355m<br><b>RES</b>:44m<br><b>SHR</b>:30m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.9%<br><b>TIME+</b>:0:00.56<br>","$area":30},"id":"proc-1-24933","name":"apache2"},{"children":[],"data":{"PID":"24935","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:353m<br><b>RES</b>:39m<br><b>SHR</b>:24m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.5%<br><b>TIME+</b>:0:00.28<br>","$area":26},"id":"proc-1-24935","name":"apache2"},{"children":[],"data":{"PID":"24936","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:359m<br><b>RES</b>:52m<br><b>SHR</b>:33m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.4%<br><b>TIME+</b>:0:00.98<br>","$area":35},"id":"proc-1-24936","name":"apache2"},{"children":[],"data":{"PID":"24939","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:354m<br><b>RES</b>:41m<br><b>SHR</b>:27m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.7%<br><b>TIME+</b>:0:00.28<br>","$area":28},"id":"proc-1-24939","name":"apache2"},{"children":[],"data":{"PID":"24941","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:362m<br><b>RES</b>:57m<br><b>SHR</b>:34m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.7%<br><b>TIME+</b>:0:00.43<br>","$area":38},"id":"proc-1-24941","name":"apache2"},{"children":[],"data":{"PID":"24942","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:357m<br><b>RES</b>:41m<br><b>SHR</b>:26m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.7%<br><b>TIME+</b>:0:00.31<br>","$area":28},"id":"proc-1-24942","name":"apache2"},{"children":[],"data":{"PID":"24943","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:346m<br><b>RES</b>:16m<br><b>SHR</b>:8604<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:1.1%<br><b>TIME+</b>:0:00.09<br>","$area":12},"id":"proc-1-24943","name":"apache2"},{"children":[],"data":{"PID":"24944","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:351m<br><b>RES</b>:34m<br><b>SHR</b>:21m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:2.3%<br><b>TIME+</b>:0:00.18<br>","$area":24},"id":"proc-1-24944","name":"apache2"},{"children":[],"data":{"PID":"24945","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:363m<br><b>RES</b>:67m<br><b>SHR</b>:43m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:4.4%<br><b>TIME+</b>:0:00.99<br>","$area":45},"id":"proc-1-24945","name":"apache2"},{"children":[],"data":{"PID":"24946","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:342m<br><b>RES</b>:5552<br><b>SHR</b>:1800<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.4%<br><b>TIME+</b>:0:00.03<br>","$area":5},"id":"proc-1-24946","name":"apache2"},{"children":[],"data":{"PID":"24950","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:www-data<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:360m<br><b>RES</b>:48m<br><b>SHR</b>:30m<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:3.2%<br><b>TIME+</b>:0:00.39<br>","$area":33},"id":"proc-1-24950","name":"apache2"}],"data":{"PID":"apache2","$area":11400},"id":"proc-apache2","name":"apache2(32)"},"newrelic-daemon":{"children":[{"children":[],"data":{"PID":"399","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:16232<br><b>RES</b>:292<br><b>SHR</b>:288<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.0%<br><b>TIME+</b>:0:00.00<br>","$area":1},"id":"proc-1-399","name":"newrelic-daemon"},{"children":[],"data":{"PID":"400","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:264m<br><b>RES</b>:7284<br><b>SHR</b>:2360<br><b>S</b>:S<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.5%<br><b>TIME+</b>:40:33.01<br>","$area":6},"id":"proc-1-400","name":"newrelic-daemon"}],"data":{"PID":"newrelic-daemon","$area":80},"id":"proc-newrelic-daemon","name":"newrelic-daemon(2)"},"top":{"children":[{"children":[],"data":{"PID":"24988","$color":"#0EAB06","cmdinfo":"<br><b>USER</b>:root<br><b>PR</b>:20<br><b>NI</b>:0<br><b>VIRT</b>:19196<br><b>RES</b>:1328<br><b>SHR</b>:1048<br><b>S</b>:R<br><b>CPU</b>:0%<br>%<b>MEM</b>:0.1%<br><b>TIME+</b>:0:00.00<br>","$area":2},"id":"proc-1-24988","name":"top"}],"data":{"PID":"top","$area":30},"id":"proc-top","name":"top(1)"}}" 

내가 다음 JSON.parse(...)를 사용하여 자바 스크립트 객체에이 변환하고 data에 할당 : 데이터는 것 같습니다.

그리고 실제 InfoVis 코드 :

function getCanvasConfig() { 
     var ua = navigator.userAgent, 
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), 
      typeOfCanvas = typeof HTMLCanvasElement, 
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'), 
      textSupport = nativeCanvasSupport 
       && (typeof document.createElement('canvas').getContext('2d').fillText == 'function'); 

     //I'm setting this based on the fact that ExCanvas provides text support for IE 
     //and that as of today iPhone/iPad current text support is lame 
     return { 
      labelType: (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML', 
      nativeTextSupport: (!nativeCanvasSupport || (textSupport && !iStuff)), 
      useGradients: nativeCanvasSupport, 
      animate: !(iStuff || !nativeCanvasSupport) 
     }; 
    } 

    var config = getCanvasConfig(); 
    var attrs = {id: "infovis"}; 

    var tmConfig = { 
      //where to inject the visualization 
      injectInto: attrs.id, 
      //parent box title heights 
      titleHeight: 15, 
      //enable animations 
      animate: config.animate, 
      //box offsets 
      offset: 1, 
      //Attach left and right click events 
      Events: { 
       enable: true, 
       onClick: function(node) { 
        if(node) tm.enter(node); 
       }, 
       onRightClick: function() { 
        tm.out(); 
       } 
      }, 
      duration: 1000, 
      //Enable tips 
      Tips: { 
       enable: true, 
       //add positioning offsets 
       offsetX: 20, 
       offsetY: 20, 
       //implement the onShow method to 
       //add content to the tooltip when a node 
       //is hovered 
       onShow: function(tip, node, isLeaf, domElement) { 
        var html = "<div class=\"tip-title\">" + node.name 
         + "</div><div class=\"tip-text\">"; 
        var data = node.data; 
        if(data.PID) { 
         html += "<br><b>PID</b>: " + data.PID; 
        } 
        if(data.cmdinfo) { 
         html += ""+ data.cmdinfo +""; 
        } 
        tip.innerHTML = html; 
       } 
      }, 
      //Add the name of the node in the correponding label 
      //This method is called once, on label creation. 
      onCreateLabel: function(domElement, node){ 
       domElement.innerHTML = node.name; 
       var data = node.data; 
       var PID = data.PID; 
       var style = domElement.style; 
       style.display = ''; 
       style.border = '1px solid transparent'; 
       domElement.onclick = function() { 
        $('input#PIDtext').val(PID); 
       }; 
       domElement.onmouseover = function() { 
        style.border = '1px solid #efefef'; 
       }; 
       domElement.onmouseout = function() { 
        style.border = '1px solid transparent'; 
       }; 
      } 
     }; 

     var tm = new $jit.TM.Squarified(tmConfig); 

    tm.loadJSON(data); 
    tm.refresh(); 

는 그러나, 나는 점점 계속 모두가 "정의되지 않은"입니다 캔버스에 주입. 모든 단서?

답변

0

여기를 남겨주세요.

문제가있는 데이터입니다. 적절한 이름이 & ID 인 루트 노드가 있어야하며 나머지 데이터는 하위 노드로 있어야합니다.