JavaScript控件的向下鑽取統計樹

我有統計信息的JSON數據樹：JavaScript控件的向下鑽取統計樹

{ 
    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來可視化這棵樹並能夠深入到某些節點，讓用戶直觀地分析哪些前綴具有最大權重（即count）。

我認爲treemap控制應該在這裏工作，但我接受其他建議。

請指教，我可以重複使用的免費JavaScript庫。最好是免費的，健壯的和易於使用的東西（但如果非常好的話，非免費）。

jQuery-aware庫更可取，但如果足夠好，其他任何東西都會被接受。

來源

2011-04-01 Alexander Gladysh

我找到JavaScript InfoVis Toolkit很有趣（還沒有使用它），但似乎真的看好[開源]

來源

2011-04-06 00:44:55 manji

InfoVis的TreeMap非常好，可配置性強，並且可以與您提供的格式幾乎完全一致地處理數據。一個限制是它需要完整的數據樹進行渲染。沒有內置的手段來動態加載下鑽數據。 – 2011-04-11 02:54:13

Upvoted，因爲這是一個很棒的工具。 – 2011-09-08 01:52:00

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

問過看到，在「申報單」顯示樹答案。可以在json屬性名稱中添加一點javascript，以顯示/隱藏下一個div。

對不起，我沒有現成的代碼，也許我會，如果要求很好:)

來源

2011-04-02 21:01:16 alfred

樹視圖在這裏不起作用 - 不夠直觀。我想找到一個樹形圖控件或其他能夠更有效地顯示每個節點權重的其他內容。 – 2011-04-02 22:07:30

ProtoVis來自斯坦福大學可視化小組是您的另一種選擇。請參閱示例頁面中的「層次結構」部分。

來源

2011-04-06 01:06:41

它支持鑽取數據嗎？（即，當您單擊樹形圖節點時，視圖將放大到該節點的子樹。） – 2011-04-06 01:50:08

不，它不。但它足夠靈活，可以輕鬆地將事件處理程序綁定到「click」或「mouseover」。請參閱http://vis.stanford.edu/protovis/docs/interaction.html。您可以使用jQuery UI的效果（例如傳輸）來執行動畫：http://jqueryui.com/demos/effect/。 – 2011-04-06 06:25:29

ProtoVis在IE上不能正常工作。它的大部分可視化包含很多JavaScript錯誤。 – 2011-04-11 02:46:31

如果返回的層次不太深，普通樹會工作嗎？ http://www.jstree.com/

來源

2011-04-09 08:00:49

不，對不起，在這種情況下，普通樹木不夠明顯。我需要更高級的東西，比如樹形圖。 – 2011-04-10 14:51:00

我已使用JavaScript InfoVis Toolkit中的樹形圖來做類似的事情。

但是，我沒有在JIT，的樹形圖中使用內置的向下鑽取功能，而是一次性向樹形圖提供單一級別的數據，然後使用新的數據重新繪製必要。

使用該技術JIT速度快且易於配置。

來源

2011-04-11 08:38:46 Eivind

JavaScript控件的向下鑽取統計樹

回答

相關問題