[技術博客]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函數。