D3 繪製點跟線 – APPX Tech 時賦科技 Blog

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

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

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

<div id="container"></div>

var el = document.getElementById("container");

var el = document.getElementById("container");

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

 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]
    ];

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容器放入

var graph = new Insights(el, nodes, links).render();

1	var graph = new Insights(el, nodes, links).render();

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

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

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

graph.tooltip("<div>word: {{text}}</div><div>count: {{count}}</div><div>Size: {{size}}</div><div>cluster: {{cluster}}</div>");

1	graph.tooltip("<div>word: {{text}}</div><div>count: {{count}}</div><div>Size: {{size}}</div><div>cluster: {{cluster}}</div>");

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

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

graph.PathTooltip("<div>Between: {{text}}</div>");

1	graph.PathTooltip("<div>Between: {{text}}</div>");

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

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

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

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

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
    }

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

}

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

7. node event

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 = 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 : 單次點擊

onCircleClick: function(d) {
    var self = this
      , e = d3.event,
      forceId = this.focus(d.id);
   
    nodeClickedOnce = true;
    nodeClickEvent = setTimeout(function () {
        // To avoid focusing hidden elements
        if (nodeClickedOnce) {
            if (!self.isNodeVisible(d)) {
                return;
            } else {
                e.preventDefault();
                e.stopPropagation();
            }

            forceId.update();
            self.emit("node:click", d);
        }
    },250);
  },

onCircleClick: function(d) {

var self = this

, e = d3.event,

forceId = this.focus(d.id);

nodeClickedOnce = true;

nodeClickEvent = setTimeout(function () {

// To avoid focusing hidden elements

if (nodeClickedOnce) {

if (!self.isNodeVisible(d)) {

return;

} else {

e.preventDefault();

e.stopPropagation();

}

forceId.update();

self.emit("node:click", d);

}

},250);

dblclick : 雙次點擊

onDoubleClick: function (d) {
      nodeClickedOnce = false;
      clearTimeout(nodeClickEvent);
      d3.event.stopPropagation();
      alert("Double Click");
  }

onDoubleClick: 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

var filterParam = 
{
    cluster:"1",
       text:""
}

graph.filter(filterParam).update();

var filterParam =

{

cluster:"1",

text:""

}

graph.filter(filterParam).update();

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

Facebook Comments