I have a JSON data tree with statistical information:
{
prefix: "a",
count: 20,
children: [
{
prefix: "a:b",
count: 15,
children: [
{ prefix: "a:b:c", count: 5 },
{
prefix: "a:b:d",
count: 10
children: [
{ prefix: "a:b:d:e", count = 7 },
{ prefix: "a:b:d:f", count = 3 }
]
}
]
},
{ prefix: "a:c", count: 5 }
]
}
Total number of leaves is huge (but I will pre-truncate them on server, I think, so that should not be a problem).
I can change output format as needed.
I need to make a web-UI to visualize this tree and be able to drill down to certain nodes, to let user to visually analyze which prefixes have largest weight (i.e. count).
I think that a treemap control should work here, but I'm open to other suggestions.
开发者_JAVA技巧Please advise, which free JavaScript library I can reuse. Preferably something free, robust and easy to use (but non-free OK if it is excellent).
jQuery-aware libraries are preferable, but anything else is accepted if it is good enough.
I find the JavaScript InfoVis Toolkit
very interesting (haven't used it) but seems really promising [open source]
ProtoVis from the Stanford Visualization group is another option for you. See under the Hierarchies section in the example page.
If the hierarchy returned is not too deep, would a regular tree work? http://www.jstree.com/
I've used the treemap in JavaScript InfoVis Toolkit to do a similar thing.
But instead of using the built-in drilling down and up function in the treemap from JIT, I found it easier to serve a single level of data to the treemap at a time, and then redraw it with new data when necessary.
Using that technique The JIT is fast, and easy to configure.
asked before in Display JSON/YAML hierarchy as a tree in HTML?
see the answer that display the tree in "divs". it is possible to add a little javascript to the json property names, to show/hide the next div.
sorry, i don't have code ready, maybe i will, if asked nicely :)
精彩评论