D3 繪製點跟線

GitHub : https://github.com/amberchenchen/D3

首先先加入  insights.standalone.js and insights.standalone.css 這兩支檔案

先準備好 Div容器 ,裝點跟線

再來就是 要有點跟線的資料

1.nodes

  • id: primary key
  • text: node  名稱
  • size: node 大小
  • cluster: node群組的屬性設定,可以把node分類然後針對這類的node去設定顏色大小等等之類的

2.links [1,2] 表示你要在node id=1 跟 node id=2 畫線

3.點跟線都有了,再來就是畫圖 運用 Insights 物件把點跟線以及div容器放入

便會出現點跟線的關析圖 (如下)

螢幕快照 2017-07-02 下午6.36.27

4.node 上的 tooltip ,呼叫已在底層寫好的 tooltip  方法,把想要呈現的內容放入

螢幕快照 2017-07-02 下午6.41.57

 

5. link 線上的 tooltip, 跟node 一樣  ,呼叫已在底層寫好的 PathTooltip方法,把想要呈現的內容放入

螢幕快照 2017-07-02 下午6.46.10

6.再來介紹node的拖拉 drag and drop

主要在 產生node時 ,加上 call back 這個方法  ex: call(node_drag)

  • dragstart : 開始拖拉
  • dragmove : 拖拉過程 , 必須同時update  node 跟 link位置
  • dragend : 拖拉結束

 

螢幕快照 2017-07-02 下午6.54.13

7. node event

首先要先在產生node時 ,先註冊你要的事件

  • click  :  單次點擊
  • dblclick : 雙次點擊

    如何區分單次點擊跟雙次點擊 : 在單次點擊設定 setTimeOut 等250毫秒在去執行單次點擊,如果等待過程中觸發的是雙次點擊那就會進入雙次點擊方法並把正在等待的timeout方法 clear掉直接執行 double click

  • contextmenu : 右鍵觸發

8. Filter node :

基本上就是呼叫 filter這個方法,然後把需要filter的條件組成Json格式放入,最後在update node

螢幕快照 2017-07-02 下午7.15.32

Facebook Comments