[技术博客]D3学习使用笔记

D3 的全称是Data-Driven Documents,即数据驱动文档,用来做数据可视化。

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

insert()在选择集前面插入元素

append()在选择集末尾插入元素

select()选择所有指定元素的第一个

selectAll()选择指定全部元素

datum()绑定一个数据到选择集上

data()绑定一个数组到选择集上,数组的各项值分别与选择集的各元素绑定

update()enter()exit() 是 D3 中三个非常重要的概念,它处理的是当选择集和数据的数量关系不确定的情况。

update():对应的元素正好满足( 绑定数据数量 = 对应元素),直接操作即可,后面直接跟text()style()等操作。

enter()对应的元素不足( 绑定数据数量 > 对应元素 ),需要添加元素,使之与绑定数据的数量相等。后面通常先跟append()操作。

exit()对应的元素过多( 绑定数据数量 < 对应元素 ),需要删除元素,使之与绑定数据的数量相等。后面通常要跟remove()操作。

[技术博客]D3学习使用笔记_第1张图片

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绑定到svgpath元素上,使用mindmap-connection覆盖原有的class属性。这里svg是画布,pathsvg中的路径属性,用来绘制图形,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.xnode.y是节点当前的横纵坐标,node.fxnode.fy是节点固定的横纵坐标,这两个属性可以让节点固定在一个位置,即在其他节点拖动的时候位置不会改变。每次tick结束后,节点的 node.x 会被重新设置为 node.fx node.y会被重新替换为 node.fy 。这里on()用于交互,当监听到start事件就调用dragStart函数,当监听到drag事件就调用dragged函数,当监听到end事件就调用dragEnd函数。

你可能感兴趣的:([技术博客]D3学习使用笔记)