GitHub : https://github.com/amberchenchen/D3
首先先加入 insights.standalone.js and insights.standalone.css 這兩支檔案
先準備好 Div容器 ,裝點跟線
|
1 2 3 |
<div id="container"></div> var el = document.getElementById("container"); |
再來就是 要有點跟線的資料
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
var nodes = [ { id: 1, text: "apple", size: 8, cluster: 5 }, { id: 2, text: "google", size: 8, cluster: 2 }, { id: 3, text: "microsoft", size: 8, cluster: 1 }, { id: 4, text: "Facebook", size: 8, cluster: 1 } ]; var links = [ [1, 2], // [ source.id, target.id ] [2, 3], [1, 3], [4, 1], [1,4], [4, 2], [3,4] ]; |
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容器放入
|
1 |
var graph = new Insights(el, nodes, links).render(); |
便會出現點跟線的關析圖 (如下)
4.node 上的 tooltip ,呼叫已在底層寫好的 tooltip 方法,把想要呈現的內容放入
|
1 |
graph.tooltip("<div>word: {{text}}</div><div>count: {{count}}</div><div>Size: {{size}}</div><div>cluster: {{cluster}}</div>"); |
5. link 線上的 tooltip, 跟node 一樣 ,呼叫已在底層寫好的 PathTooltip方法,把想要呈現的內容放入
|
1 |
graph.PathTooltip("<div>Between: {{text}}</div>"); |
6.再來介紹node的拖拉 drag and drop
主要在 產生node時 ,加上 call back 這個方法 ex: call(node_drag)
- dragstart : 開始拖拉
- dragmove : 拖拉過程 , 必須同時update node 跟 link位置
- dragend : 拖拉結束
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
var node = this.d3Nodes = this.parent.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .call(node_drag) .on("mouseover", bind(this, this.onMouseOver)) .on("mouseout", bind(this, this.onMouseOut)) .on("click", bind(this, this.onCircleClick)) .on('dblclick', bind(this, this.onDoubleClick)) .on('contextmenu', bind(this, this.onCircleRightClick)); var node_drag = force.drag() .origin(function (d) { return d; }) .on("dragstart", dragstart) .on("drag", dragmove) .on("dragend", dragend); function dragstart(d, i) { d3.event.sourceEvent.stopPropagation(); force.stop() // stops the force auto positioning before you start dragging } function dragmove(d, i) { d.px += d3.event.dx; d.py += d3.event.dy; d.x += d3.event.dx; d.y += d3.event.dy; self.updateNodesPosition(); self.updateLinksPosition(); } function dragend(d, i) { d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff } |
7. node event
|
1 2 3 4 5 6 7 8 9 10 |
var node = this.d3Nodes = this.parent.selectAll(".node") .data(force.nodes()) .enter().append("g") .attr("class", "node") .call(node_drag) .on("mouseover", bind(this, this.onMouseOver)) .on("mouseout", bind(this, this.onMouseOut)) .on("click", bind(this, this.onCircleClick)) .on('dblclick', bind(this, this.onDoubleClick)) .on('contextmenu', bind(this, this.onCircleRightClick)); |
首先要先在產生node時 ,先註冊你要的事件
- click : 單次點擊
123456789101112131415161718192021onCircleClick: function(d) {var self = this, e = d3.event,forceId = this.focus(d.id);nodeClickedOnce = true;nodeClickEvent = setTimeout(function () {// To avoid focusing hidden elementsif (nodeClickedOnce) {if (!self.isNodeVisible(d)) {return;} else {e.preventDefault();e.stopPropagation();}forceId.update();self.emit("node:click", d);}},250);}, - dblclick : 雙次點擊
123456onDoubleClick: function (d) {nodeClickedOnce = false;clearTimeout(nodeClickEvent);d3.event.stopPropagation();alert("Double Click");}如何區分單次點擊跟雙次點擊 : 在單次點擊設定 setTimeOut 等250毫秒在去執行單次點擊,如果等待過程中觸發的是雙次點擊那就會進入雙次點擊方法並把正在等待的timeout方法 clear掉直接執行 double click
- contextmenu : 右鍵觸發
8. Filter node :
基本上就是呼叫 filter這個方法,然後把需要filter的條件組成Json格式放入,最後在update node
|
1 2 3 4 5 6 7 |
var filterParam = { cluster:"1", text:"" } graph.filter(filterParam).update(); |
