React+D3组件开发之treemap(树图)

背景

在React前端项目中使用D3JS定制可视化组件，treemap支持节点的新建、删除、缩放、全屏等功能

技术实现

首先图表线和点的数据

	  // dataSource初始数据
	  const hierarchyData = d3.hierarchy(dataSource)
      // hierarchy layout and add node.x,node.y
      const treeNode = this.tree(hierarchyData);
      nodes = treeNode.descendants();
      links = treeNode.links();
      nodes = nodes.map(node => {
   
        if (node.active) {
   
          node.active = false;
          if (node.parent) {
   
            node.parent.active = false;
          }
        }
        if (node.data.name === currentNode.name) {
   
          node.active = true;
          if (node.parent) {
   
            node.parent.active = true;
          }
        }
        return node;
      });

画线path

<g>
  {
   
    links.map((link, i) => {
   
    const start = {
    x: link.source.x