我一直在使用Force-Directed Graph,但我仍然是D3js和Javascript的新手。d3js強制定向圖 - 點擊節點彈出信息從JSON讀取
我希望能夠點擊頁面上的節點和信息框彈出窗口並打印關於該節點的某些信息(來自JSON)。我的JSON文件的
例子:
{"directed": false, "graph": {},
"nodes": [{"id": 0, "name":"Ant" , "info":"Small Animal"},
{"id": 1 , "name":"Apple" , "info":"Fruit"},
{"id": 2 , "name":"Bat" , "info":"Fly Animal"},
{"id": 3 , "name":"Boat" , "info":"Vehicle"},
{"id": 4 , "name":"Banana" , "info":"Long cute Fruit"},
{"id": 5 , "name":"Cat" , "info":"Best Animal"}],
"links": [{"source": 0, "target": 0 , "weight":1}, {"source": 0, "target": 2, "weight": 0.3},
{"source": 0, "target": 5, "weight":0.8}, {"source": 1, "target": 1, "weight":1},
{"source": 1, "target": 4, "weight":0.5}, {"source": 2, "target": 2, "weight":1},
{"source": 3, "target": 3, "weight":1}, {"source": 4, "target": 4, "weight":1},
{"source": 5, "target": 5, "weight":1}],
"multigraph": false}
所以,當我點擊一個節點上。它應該彈出像這樣的東西:
Name: Ant
Info: Small Animal
Connected to: Bat with 0.3 weight , Cat with 0.8 weight
我的圖形代碼幾乎就像上面鏈接的力量指導的例子。
非常感謝。它看起來非常好,但是當信息顯示時沒有辦法刪除它(除了點擊其他節點)。點擊空格時,信息框可以消失嗎? – Lilbeartr
@Lbebeartr,請參閱上面代碼的編輯。 – Mark
感謝您的幫助! – Lilbeartr