[技術部落格]D3學習使用筆記

D3 的全稱是Data-Driven Documents，即資料驅動文檔，用來做資料可視化。

選擇集資料綁定以及動态綁定class

insert()

在選擇集前面插入元素

append()

在選擇集末尾插入元素

select()

選擇所有指定元素的第一個

selectAll()

選擇指定全部元素

datum()

綁定一個資料到選擇集上

data()

綁定一個數組到選擇集上，數組的各項值分别與選擇集的各元素綁定

update()

、

enter()

exit()

是 D3 中三個非常重要的概念，它處理的是當選擇集和資料的數量關系不确定的情況。

update()

：對應的元素正好滿足（ 綁定資料數量 = 對應元素），直接操作即可，後面直接跟

text()

，

style()

等操作。

enter()

對應的元素不足（ 綁定資料數量 > 對應元素 ），需要添加元素，使之與綁定資料的數量相等。後面通常先跟

append()

操作。

exit()

對應的元素過多（ 綁定資料數量 < 對應元素 ），需要删除元素，使之與綁定資料的數量相等。後面通常要跟

remove()

const bindData = (root, data, tag) => (
  root.append('g')
    .selectAll(tag)
    .data(data)
    .enter()
    .append(tag)
);
           

上述這段代碼起到了綁定資料的作用，将

data

綁定到

root

上的所有

tag

元素上，當

tag

不足時添加

tag

使

tag

的數量與綁定

data

的數量相等。

舉個例子：

export const d3Connections = (svg, connections) => {
  return bindData(svg, connections, 'path')
    .attr('class', 'mindmap-connection');
};
           

将

connections

svg

的

path

元素上，使用

mindmap-connection

覆寫原有的

class

屬性。這裡

svg

是畫布，

path

是

svg

中的路徑屬性，用來繪制圖形，

connections

是連接配接的集合，并将

class

綁定為

mindmap-connection

對連接配接進行渲染。

節點拖動

export const d3Drag = (simulation, svg, nodes) => {
  const dragStart = (node) => {
    if (!event.active) {
      simulation.alphaTarget(0.2).restart();
    }
    node.fx = node.x;
    node.fy = node.y;
  };

  const dragged = (node) => {
    node.fx = event.x;
    node.fy = event.y;
  };

  const dragEnd = () => {
    if (!event.active) {
      simulation.alphaTarget(0);
    }
  };

  return drag()
    .on('start', dragStart)
    .on('drag', dragged)
    .on('end', dragEnd);
};
           

simulation

是繪圖的模拟器，

svg

nodes

是所有的節點，在之後可直接使用

(node) => {}

表示對

nodes

中每一個元素進行操作。

上述代碼表示了拖動節點的三個過程：開始拖動、拖動、結束拖動。

node.x

與

node.y

是節點目前的橫縱坐标，

node.fx

node.fy

是節點固定的橫縱坐标，這兩個屬性可以讓節點固定在一個位置，即在其他節點拖動的時候位置不會改變。每次

tick

結束後，節點的

node.x

會被重新設定為

node.fx

node.y

會被重新替換為

node.fy

。這裡

on()

用于互動，當監聽到

start

事件就調用

dragStart

函數，當監聽到

drag

dragged

end

dragEnd

函數。