Question

我有一个包含统计信息的JSON数据树：

{
  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 }
  ]
}

叶子总数很大（但我想在服务器上预先截断它们，所以这应该不是问题）。

我可以根据需要更改输出格式。

我需要创建一个web-UI来显示这个树，并能够深入到某些节点，让用户可以直观地分析哪些前缀具有最大权重（即计数）。

我认为treemap控件应该在这里工作，但我愿意接受其他建议。

请告知我可以重用的免费JavaScript库。最好是免费，强大且易于使用的东西（但如果非常好的话，非免费的OK）。

jQuery-aware库是首选，但如果足够好，则接受其他任何内容。

Answer 1

我发现JavaScript InfoVis Toolkit非常有趣（没有使用它）但似乎很有希望 [开源]

Answer 2

来自斯坦福可视化组的

ProtoVis是另一种选择。请参阅示例页面中的Hierarchies部分。

Answer 3

如果返回的层次结构不是太深，那么常规树会起作用吗？ http://www.jstree.com/

Answer 4

我在JavaScript InfoVis Toolkit中使用了树形图来做类似的事情。

但是不是在JIT的树形图中使用内置的向下钻取功能，我发现一次向树形图提供单一级别的数据更容易，然后在必要时用新数据重绘它。

使用该技术JIT快速且易于配置。

Answer 5

之前在Display JSON/YAML hierarchy as a tree in HTML?

询问

查看以“divs”显示树的答案。可以在json属性名称中添加一点javascript，以显示/隐藏下一个div。

抱歉，我没有准备好代码，也许我会，如果问得好的话：）

用于向下钻取到统计信息树的JavaScript控件

5 个答案: