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函数。

选择集数据绑定以及动态绑定class

节点拖动

猜你喜欢