具有兩個以上級別的可縮放樹形圖D3plus？

Question

我需要創建一個縮放能夠使用D3plus與超過兩個縮放級別的樹形圖。
它應該是基本上，我使用D3plus代替D3，因爲我想用它的腳手架 以更簡單的方式來創建的映像樹像http://d3plus.org/examples/advanced/9860411/

。

不管怎樣，在D3它已經完成http://bost.ocks.org/mike/treemap/

誰能幫助我在這？在此先感謝

Answer 1

這在D3plus中非常簡單，您可以通過在數據陣列中添加其他級別（節點）信息來獲得所需的縮放級別。

這取決於兩件事情：

數據是平坦JSON結構，並且包括節點的相互關係（父，孩子等）：

var sample_data = [ 
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 1"}, 
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 2"}, 
    {"value": 100, "name": "alpha", "group": "group 1", "details": "example 3"}, 
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 1"}, 
    {"value": 70, "name": "beta", "group": "group 2", "details": "example 2"}, 
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 1"}, 
    {"value": 40, "name": "gamma", "group": "group 2", "details": "example 2"}, 
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 1"}, 
    {"value": 15, "name": "delta", "group": "group 2", "details": "example 2"}, 
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 1"}, 
    {"value": 5, "name": "epsilon", "group": "group 1", "details": "example 2"}, 
    {"value": 1, "name": "zeta", "group": "group 1", "details": "example 1"} 
    ] 

注意，每個name標識它屬於哪個group。在這種情況下，group是父節點，並且name是孩子。

使用.id()方法指示d3plus包含多少級別及其順序。使用上述的數據結構，並且包括的「方式」的第三縮放級別將是：.id(["group","name", "details"])d3plus id() documentation and example here

Check out this fiddle