2013-04-10 86 views
0

我正在使用創建水平條形圖的代碼,我已經訪問了here表單並進行了一些修改以適合我的需要。ClickEvent過渡到新數據

我正在尋找過渡到一個新的數據集,單擊其中一個酒吧。

例如,如果有人點擊美國,我想渲染一個具有美國州名和它們的值的新圖。

這裏的初始數據集

var countries = ['India', 'America', 'China', 'Russia', 'London'], 
    value = [8, 4, 9, 12, 11]; 

,這裏是我希望它在點擊美國或4條

var AmericaS = ['MA','CA','NH'], 
AmericaV = [10,9,11]; 

這裏過渡到怎麼使用代碼的jsfiddle我到目前爲止有:

jsfiddle

我一直試着克不同的方式來做到這一點,但似乎沒有任何工作。我非常感謝你能給我提供的任何幫助。

+1

你看看[本教程(http://mbostock.github.io/d3/tutorial/bar-2.html)? – 2013-04-10 17:35:56

+0

@LarsKotthoff我明白重畫函數會渲染一個新的圖形,並帶有更新後的數據。不過,我想我的主要問題是我不知道如何從一個數據集轉換到另一個數據集。我不知道如何重置.data中的參數(...) – user2159121 2013-04-11 00:35:28

+0

您不需要重置任何東西。您只需傳入新數據並處理輸入,更新和退出選擇。在你的情況下,更新選擇將是空的,輸入選擇將包含新數據集的所有元素和退出選擇舊數據集中的所有內容(具有適當的匹配函數)。 – 2013-04-11 08:25:12

回答

0

看看M.Bostocks' example這與您嘗試做的事情類似,如果我正確的話。看看頁面的源代碼來繪製圖表。

如果你想是被雖然傳遞的數據的一個例子 -

var demoArray = { 
    "name" : "aa", 
    "children" : [{ 
     "name" : "analytics", 
     "children" : [{ 
      "name" : "cluster", 
      "children" : [{ 
       "test" : 'aaa', 
       "name" : "AgglomerativeCluster", 
       "size" : 3938 
      }, { 
       "test" : 'aaa', 
       "name" : "CommunityStructure", 
       "size" : 3812 
      }, { 
       "test" : 'aaa', 
       "name" : "MergeEdge", 
       "size" : 743 
      }] 
     }, { 
      "name" : "graph", 
      "children" : [{ 
       "test" : 'aaa', 
       "name" : "BetweennessCentrality", 
       "size" : 3534 
      }, { 
       "test" : 'aaa', 
       "name" : "LinkDistance", 
       "size" : 5731 
      }] 
     }] 
    }] 
}; 

更換頁面的源代碼看起來像這樣的線72-76,

hierarchy.nodes(demoArray); 
x.domain([0, demoArray.value]).nice(); 
down(demoArray, 0); 

或只是把它放到JSON數組中。

希望這會幫助你,如果不道歉:d

+0

謝謝,這有很大的幫助:) – user2159121 2013-04-18 00:18:36