开发者

JavaScript control for drilling down into stats tree

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 :)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜